Skip to content

Instantly share code, notes, and snippets.

@n7studios
Last active September 3, 2018 08:03
Show Gist options
  • Save n7studios/bce1691b9ece431590c7 to your computer and use it in GitHub Desktop.
Save n7studios/bce1691b9ece431590c7 to your computer and use it in GitHub Desktop.
Custom TinyMCE Dashicon
(function() {
tinymce.PluginManager.add('custom_tinymce_plugin', function(editor,url) {
editor.addButton('custom_tinymce_plugin', {
title: 'Custom TinyMCE Plugin',
icon: 'bold',
onclick: function() {
editor.insertContent('Button clicked!');
}
})
});
})();
(function() {
tinymce.PluginManager.add('custom_tinymce_plugin', function(editor,url) {
editor.addButton('custom_tinymce_plugin', {
title: 'Custom TinyMCE Plugin',
image: 'icon.png',
onclick: function() {
editor.insertContent('Button clicked!');
}
})
});
})();
i.mce-i-icon {
font: normal 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;
}
(function() {
tinymce.PluginManager.add('custom_tinymce_dashicons', function(editor,url) {
editor.addButton('custom_tinymce_dashicons', {
title: 'Custom TinyMCE Dashicons',
/**
* We specify two CSS classes for the TinyMCE Editor Button:
*
* icon: this gets prefixed with i-mce-, resulting in the first CSS class = i-mce-icon
*
* dashicons-star-filled: this is the WordPress Dashicon - see http://melchoyce.github.io/dashicons/ for a list of valid classes,
* any of which can be used here.
*/
icon: 'icon dashicons-wordpress',
// Just to prove the plugin works :)
onclick: function() {
editor.insertContent('Button clicked!');
}
})
});
})();
<?php
add_action( 'admin_enqueue_scripts', 'adminScriptsAndCSS' );
function adminScriptsAndCSS() {
// Location of your custom-tinymce-plugin.css file
wp_enqueue_style( 'custom_tinymce_plugin', plugins_url( 'custom-tinymce-plugin.css', __FILE__ ) );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment