How to add a shortcode button to wordpress page or post editor tinymce

Wordpress Nov 22, 2020 0 759 Add to Reading List

How to add a shortcode button to wordpress page or post editor tinymce

Just copy and paste below code into your theme's functions.php file or your custom plugin's file and change according to your shortcode.

And my rj-ctn-plugin.js file is as below

<!--script>
(function() {
    tinymce.create('tinymce.plugins.Rj_ctn', {
        init : function(ed, url) {
            ed.addButton('ctn', {
                title : 'CTA Button',
                cmd : 'ctn',
                image: url + '/icon.gif'
            });

          
            ed.addCommand('ctn', function() {
                var selected_text = ed.selection.getContent();
                var return_text = '';
                return_text = '[button size="medium" link="#" linking="default"]Button Text[/button]';
                ed.execCommand('mceInsertContent', 0, return_text);
            });

          
        },
        // ... Hidden code
    });
    // Register plugin
    tinymce.PluginManager.add( 'rj_ctn', tinymce.plugins.Rj_ctn );
})();
<!--/script>