Custom TinyMCE Buttons Example Plugin

tinymce-logo

My example WordPress TinyMCE Example plugin is now done and up on GitHub. Download it and play around with it! Below you can see the README which I’ve embedded using DobsonDev Shortcodes – so download that to your blog if you haven’t already as well!


 

DobsonDev WordPress TinyMCE Example

A simple plugin created to illustrate how to create a TinyMCE plugin that will add custom made buttons to the WordPress editor. The plugin contains nine different button types so that users can see how they all look and function.

  • Text Button
  • Standard Icon Button
  • Dashicons Icon Button
  • Custom Icon Button
  • Custom Icon w/ Text Button
  • Dashicons Icon Button with Sub Menu
  • Dashicons Icon Button with Sub Menu with Icon and Text Label
  • Dashicons Icon Button with Sub Sub Menu
  • Dashicons Icon Button that produces a Popup

Below is the main code for each button for easy reference. It can be added to the main plugin wrapper which looks like this:

(function() {
  tinymce.PluginManager.add('dobsondev_tinymce_example_plugin', function( editor, url ) {

    // BUTTON CODE GOES HERE

  });
})();

Text Button

// example of a text label button
editor.addButton( 'dobsondev_tinymce_example_text_button', {
  title: 'Example Text Label Button',
  text: 'Example Text Label Button',
  icon: false,
  onclick: function() {
    editor.insertContent('Example Text Label Button');
  }
});

Standard Icon Button

// example of a standard icon labelled button
editor.addButton( 'dobsondev_tinymce_example_icon_button', {
  title: 'Example Standard Icon Button',
  icon: 'wp_code',
  onclick: function() {
    editor.insertContent('Example Standard Icon Button');
  }
});

Dashicons Icon Button

// example of a dashicons icon labelled button
editor.addButton( 'dobsondev_tinymce_example_dashicons_button', {
  title: 'Example Dashicons Button',
  icon: 'icon dashicons-admin-post',
  onclick: function() {
    editor.insertContent('Example Dashicons Icon Button');
  }
});

Custom Icon Button

// example of a custom (using your own graphic) icon labelled button
editor.addButton( 'dobsondev_tinymce_example_custom_icon_button', {
  title: 'Example Custom Icon Button',
  icon: 'icon dobsondev-icon',
  onclick: function() {
    editor.insertContent('Example Dashicons Icon Button');
  }
});

Custom Icon w/ Text Button

// example of a custom (using your own graphic) icon labelled button
// with a text label as well
editor.addButton( 'dobsondev_tinymce_example_custom_icon_text_button', {
  title: 'Example Custom Icon with Text',
  text: 'Icon w/ Text',
  icon: 'icon dobsondev-icon',
  onclick: function() {
    editor.insertContent('Example Dashicons Icon with Text');
  }
});

Dashicons Icon Button with Sub Menu

// example of a dashicons icon labelled button with a sub menu
editor.addButton( 'dobsondev_tinymce_example_sub_menu_button', {
  title: 'Example Sub Menu Button',
  type: 'menubutton',
  icon: 'icon dashicons-filter',
  menu: [{
    text: 'Sub Menu Item #1',
    value: 'Value for Sub Menu Item #1',
    onclick: function() {
      editor.insertContent(this.value());
    }
  },
  {
    text: 'Sub Menu Item #2',
    icon: 'icon dashicons-admin-site',
    value: 'Value for Sub Menu Item #2',
    onclick: function() {
      editor.insertContent(this.value());
    }
  }]
});

Dashicons Icon Button with Sub Menu with Icon and Text Label

// example of a dashicons icon labelled button with a sub menu with
// the sub menu items being labelled with an icon as well as text
editor.addButton( 'dobsondev_tinymce_example_sub_menu_icon_button', {
  title: 'Example Sub Menu with Icons Button',
  type: 'menubutton',
  icon: 'icon dashicons-filter',
  menu: [{
    text: 'Sub Menu Item with Icon #1',
    icon: 'icon dashicons-admin-site',
    value: 'Value for Sub Menu with Icon Item #1',
    onclick: function() {
      editor.insertContent(this.value());
    }
  },
  {
    text: 'Sub Menu Item with Icon #2',
    icon: 'icon dashicons-admin-site',
    value: 'Value for Sub Menu with Icon Item #2',
    onclick: function() {
      editor.insertContent(this.value());
    }
  }]
});

Dashicons Icon Button with Sub Sub Menu

// example of a dashicons icon labelled button with a sub menu and
// where that sub menu also has its own sub menu (ie. sub sub menu)
editor.addButton( 'dobsondev_tinymce_example_sub_sub_menu_button', {
  title: 'Example Sub Sub Menu',
  type: 'menubutton',
  icon: 'icon dashicons-networking',
  menu: [
    {
      text: 'Sub Menu Item #1',
      value: 'Value for Sub Menu Item #1',
      onclick: function() {
        editor.insertContent(this.value());
      }
    },
    {
      text: 'Sub Menu Item #2',
      value: 'Value for Sub Menu Item #2',
      onclick: function() {
        editor.insertContent(this.value());
      },
      menu: [
      {
        text: 'Sub-Sub Menu Item #1',
        value: 'Value for Sub-Sub Menu Item #1',
        onclick: function(e) {
          e.stopPropagation(); // we need this to ensure the parent item's value isn't also displayed
          editor.insertContent(this.value());
        }
      },
      {
        text: 'Sub-Sub Menu Item #2',
        value: 'Value for Sub-Sub Menu Item #2',
        onclick: function(e) {
          e.stopPropagation(); // we need this to ensure the parent item's value isn't also displayed
          editor.insertContent(this.value());
        }
      }
    ]
    },
    {
      text: 'Sub Menu Item #3',
      value: 'Value for Sub Menu Item #3',
      onclick: function() {
        editor.insertContent(this.value());
      }
    }
  ]
});

Dashicons Icon Button that produces a Popup

// example of a dashicons icon labelled button that when pressed results
// in a popup window appearing
editor.addButton( 'dobsondev_tinymce_example_popup_button', {
  title: 'Example Popup Window Button',
  icon: 'icon dashicons-admin-page',
  onclick: function() {
    editor.windowManager.open( {
      title: 'Insert Whatever',
      body: [
      {
        type: 'textbox',
        name: 'text',
        label: 'Whatever'
      },
      {
        type: 'textbox',
        name: 'text2',
        label: 'Moar Whatever'
      }],
      onsubmit: function( e ) {
        editor.insertContent( 'This is your whatever: ' + e.data.text + ' ' + e.data.text2 );
      }
    });
  }
});

 

As always thank you for reading and please share it around as much as you can! Please feel free to put any suggestions or ideas for future tutorials in the comments section below. Also let me know about any buttons you would want included in your WordPress install!