4

I have created a custom button for TinyMCE and I would like it to use the Twitter icon from dashicons. I am hoping to be able to do this just through the Javascript with no additional CSS. Is this possible?

Here is my current(non-working) attempt:

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'dashicons dashicons-twitter',
            onclick: function() {
                ...
            }
        });
    });
})();

3 Answers 3

2

Here's your easy solution (hopefully this will help other people too):

1) add a custom class for icon, in this example "myicons"

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'myicons dashicons-twitter',
            onclick: function() {
                ...
            }
        });
    });
})();

2) Enqueue your admin stylesheet file

function load_custom_wp_admin_style() {
   wp_enqueue_style( 'custom_wp_admin_css', 'URL/TO/custom_admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

3) Then in your custom_admin_style.css file add this:

/**
 * TinyMCE add support for dashicons
 */
i.mce-i-myicon {
    font: 400 20px/1 dashicons;
    padding: 0;
    vertical-align: top;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: -2px;
    padding-right: 2px
}
1
  • CSS should have the selector "i.mce-i-myicons" (with an "s" at the end). It wouldn't allow me to edit this because the change was under 6 characters.
    – blisstdev
    Oct 2, 2019 at 21:34
4

I am hoping to be able to do this just through the Javascript with no additional CSS. Is this possible?

I assume you only want to stay within tinymce.PluginManager.add( ... ).

Here's a JS workaround with:

jQuery( '.is-dashicon' ).css( 'font-family', 'dashicons' );

within a onPostRender event callback:

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'insert-tweet is-dashicon dashicons dashicons-twitter',
            onPostRender: function () {
                jQuery( '.is-dashicon' ).css( 'font-family', 'dashicons' );
            },
            onclick: function() {
                ...
            }
        });
    });
})();

that will generate the tag:

<i class="mce-ico mce-i-insert-tweet 
          is-dashicon dashicons dashicons-twitter" style="font-family: dashicons;"></i>

Example:

twitter

1

Using the OP code when setting icon to 'dashicons dashicons-twitter' the editor renders the button with the following classes 'mce-ico mce-i-dashicons dashicons-twitter'

Therefore without using jQuery what works for me is:

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'dashicons dashicons-twitter',
            onPostRender: function () {
             
                elements = document.getElementsByClassName("mce-i-dashicons");
                
                for(i=0; i<elements.length; i++) {
                    
                    elements[i].style.fontFamily = "dashicons";
                }
            }
            onclick: function() {
                ...
            }
        });
    });
})();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.