An example WordPress plugin that shows how to create a TinyMCE plugin that adds customized buttons to the editor.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
imgs
js
LICENSE
README.md
dobsondev-wordpress-tinymce-example.php

README.md

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 );
      }
    });
  }
});