How to create TinyMCE Editor Buttons for your Plugin?

This is my last article in the series about developing a WordPress Plugin. In this article, I will go through the steps for creating some buttons in my TinyMCETiny Moxiecode Content Editor is a platform-independent, browser-based WYSIWYG editor control.  for the following functionalities:

Step #8 Get Your Buttons Ready

First, choose some buttons. Here is what I went for:

Now, “colourful” may not be everyone’s choice. But there are tonnes of free icons out there  to choose from. so not to worry. If you need help finding some, feel free to drop me a message on the comment box or contact box or any of the social media. I will gladly help! 🙂

Step #9 Display Your Buttons

Get your coding hands ready, because we are going to do some stuff in both PHP and JavaScript to display your buttons in the TinyMCE Editor.

In JavaScript

If you have not used JavaScript for your shortcode, this may be the first time, you will be creating one for this plugin. I like to keep my files separate. So I have a “js” folder under by plugin folder (i.e. sony_posh_content). In this js folder, I have created a JavaScript file called sony_posh_content.js (going posh all the way!)

In this file, you  can create and register your buttons.

(function() {

   // Create your buttons in TinyMCE using the create and addButton command
   tinymce.create('tinymce.plugins.sony_posh_content', {

      init : function(editor, url) {
         editor.addButton('infotip', {                //NAME
            title : 'Infotip',                        //TOOLTIP
            image :  url + '/../images/infotip.png'   //BUTTON IMAGE
         });
         editor.addButton('successmsg', {             //NAME
            title : 'Success Message',                //TOOLTIP
            image :  url + '/../images/success.png'   //BUTTON IMAGE
         });
          
         /*** Create as many buttons as you want ***/
      },
      getInfo : function() {
         return {
            longname : 'Sony Posh Content Buttons',
            author : 'Sony Simon',
            authorurl : 'http://sonysimon.com',
            infourl : 'https://www.tinymce.com/docs/',
            version : "0.1"
         };
      }
   });
     
   // Register your buttons in TinyMCE using the PluginManager.add command
   tinymce.PluginManager.add( 'sony_posh_content', tinymce.plugins.sony_posh_content);

})();

In PHP

Next, your main plugin PHP file, you need to add and register the buttons. You can do this using one Action Hook (for ‘init’) and two Filter Hooks (for mce_external_plugins and mce_buttons). You can refer to my previous article to understand more about Hooks (step #6).

// ACTION HOOK
add_action( 'init', 'sony_posh_content_buttons' );

// ACTION HOOK CALLBACK FUNCTION. HAS TWO FILTER HOOKS.
function sony_posh_content_buttons() {
   add_filter( "mce_external_plugins", "add_buttons" );
   add_filter( 'mce_buttons', 'register_buttons' );
}

// FILTER CALLBACK FUNCTION TO ADD BUTTONS
function add_buttons( $plugin_array ) {
   $plugin_array['sony_posh_content'] = $JAVASCRIPT_FILE_LOCATION;
   return $plugin_array;
}

// FILTER CALLBACK FUNCTION TO REGISTER BUTTONS
function register_buttons($buttons) {
   array_push($buttons,"infotip","successmsg", "ALL YOUR BUTTONS HERE");
   return $buttons;
}

After this step, if you open your WordPress editor (‘Visual’ mode) your buttons will be visible. But nothing happens when you click on them. So let us bring in some action in the next step.

Step #10 Get Some Action In

This part is going to be customised depending on your plugin. But let me show you a couple of examples. First, you need to go back to your JavaScript file you created in the previous step.

Inserting a Shortcode into the Editor

In this first example, all the button will do is insert a shortcode “success” using the insertContent function.

editor.addButton('successmsg', {
   title : 'Success Message',
   image : url + '/../images/success.png',
   onclick: function() {
      editor.insertContent('[ success ][ /success ]'); // spaces added intentionally
   }
});

Getting Content from the User and Inserting it into the Editor

In the second example, when you click the button a new window will open up asking you to enter some text. This text will be formatted and entered in the editor. If you select some text while clicking on the button, this text will also be formatted in a particular way.

editor.addButton('infotip', {
   title : 'Infotip',
   image : url + '/../images/infotip.png',
   onclick: function() {
      editor.windowManager.open({
         title: 'Additional Information',
         body: [
            { type: 'textbox', name: 'infotiptext', label: 'Add Infotip Text'}
         ],
         onsubmit: function(e) {
            var selected_text = editor.selection.getContent();
            var additional_info = e.data.infotiptext;
            var return_text = '[ infotip text="' + additional_info + '"]' + selected_text + '[/infotip ]';
            editor.insertContent(return_text);
         }
      });
   }
});

Though it looks all complicated, there are only three key things to understand here

• selection.getContent() function retrieves any text you have selected while clicking the button
• insertContent(“some text”) function will insert “some text” into the editor
• windowManager.open opens a popup and within this function, you can define the title, the body and “on submit” action for your popup

TinyMCE Editor Buttons In Action

Watch how using my newly created plugin I can insert some awesome features into my content like Dropcap, Tooltip and Message Boxes.

If you would like to see more videos of the actual development work, let me know in the comments below or social media. You can read all my steps in developing this plugin here. Forgive me for the overuse of the “posh” message boxes… I just had to show them off! 😉