How to add custom tinymce plugin to new text widget

Question

So I have a custom TinyMCE plugin, which adds a button to the editor.

I'm using the mce_external_plugins and mce_buttons filter to add my TinyMCE plugin.

After WP 4.8 introduced the simple TinyMCE for the new text widget i would like to include my button i that editor as well. For some reason i can't seem to find any documentation the the widget editor in terms of modification and including additional features.

Have any of you guys had any luck modifying the widget editor? Or have you seen any documentation for custom plugins for it?

Answer 1

I found the solution with help from Jacob Peattie and the article from https://make.wordpress.org/core/2017/05/23/addition-of-tinymce-to-the-text-widget/

Here's a quick walkthrough on what i did:

I made a new js file container the code of my original button, but modified it to the event listener of the widget tinymce

jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
editor.settings.toolbar1 += ',bbh_custom_mce_button';
var pathname = window.location.hostname;
var protocol = window.location.protocol
editor.addButton( 'bbh_custom_mce_button', {
    title: 'Insert button',
    image: protocol + '//' + pathname + '/wp-content/themes/brandbyhand/include/tinymce-button/button-sharpen.png',
    onclick: function() {
        editor.windowManager.open( {
            title: 'Insert button',
            body: [
                {
                    type: 'textbox',
                    name: 'text',
                    label: 'Button text'
                },
                {
                    type: 'textbox',
                    name: 'link',
                    label: 'Button link',
                    class: 'custom-link',

                    onkeydown: function( event ){
                        var link = jQuery(event.target).val();
                        var windowID = event.currentTarget.id;
                        jQuery(event.target).addClass('custom-link-' + windowID);



                        /*if(link.indexOf('mailto:') === -1 && link.indexOf('tel:') === -1){
                            link = (link.indexOf('://') === -1) ? 'http://' + link : link;    
                        }

                        jQuery(event.target).val(link);*/
                    },
                    onfocusout: function( event ){
                        var link = jQuery(event.target).val();

                        var windowID = event.currentTarget.id;
                        jQuery(event.target).addClass('custom-link-' + windowID);

                        if(link.indexOf('mailto:') === -1 && link.indexOf('tel:') === -1){
                            link = (link.indexOf('://') === -1) ? 'http://' + link : link;    
                        }

                        jQuery(event.target).val(link);
                    }
                },
                {
                    type   : 'listbox',
                    name   : 'style',
                    label  : 'Button style',
                    values : [
                        { text: 'Empty', value: 'ghost' },
                        { text: 'Filled', value: 'filled' },
                    ],
                    value : 'style1' // Sets the default
                },
                {
                    type   : 'checkbox',
                    name   : 'target',
                    label  : 'Open link in a new tab',
                    checked : false

                }
            ],
            onsubmit: function( e ) {
                e.stopPropagation();

                var windowID = e.target._eventsRoot._id;


                var link = jQuery('.custom-link-' + windowID).val();

                if(link.indexOf('mailto:') === -1 && link.indexOf('tel:') === -1){
                    link = (link.indexOf('://') === -1) ? 'http://' + link : link;
                }

                jQuery('.custom-link-' + windowID).val(link);


                var target = '_self';
                if(e.data.target === true){
                    target = '_blank';
                } else if(e.data.target === false){
                    target = '_self'
                }

                editor.insertContent( '<span class="clearfix"><a class="btn btn-custom ' + e.data.style + '" target="' + target + '" href="' + link + '">' + e.data.text + '</a></span>' );
                editor.windowManager.close();
            }
        });
    }
});
});

I then enqueued that file using the admin_enqueue_scripts hook:

function my_enqueue($hook) {
if ( 'widgets.php' != $hook ) {
    return;
}

    wp_enqueue_script( 'tinymce_custom_button_widget', get_stylesheet_directory_uri() . '/js/tinymce_widget.js', array( 'jquery' ), '1.0', true  );
    wp_enqueue_style( 'tinymce_custom_button_widget_css', get_stylesheet_directory_uri() . '/include/tinymce-button/custom-editor-style.css', '1.0', 'all');
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

And thats basically it.