TinyMCE Plugin: Feature Box

This adds a “feature box” button to the TinyMCE content editor. Click the button and the HTML markup for a feature box appears in the editor. Use your theme’s editor-style.css to style it in TinyMCE to match the frontend.

This saves users from clicking “HTML”, typing <div class="feature-box"><p>Feature box content goes here</p></div> , then switching back to Visual to edit it.

(function() {
tinymce.create('tinymce.plugins.be_feature_box', {
* Initializes the plugin, this will be executed after the plugin has been created.
* This call is done before the editor instance has finished it's initialization so use the onInit event
* of the editor instance to intercept that event.
* @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
* @param {string} url Absolute URL to where the plugin is located.
init : function(ed, url) {
ed.addButton('featurebox', {
title : 'Feature Box',
cmd : 'featurebox',
image : url + '/featurebox.png'
ed.addCommand('featurebox', function() {
return_text = '<div class="feature-box"><p>Feature box content goes here</p></div>';
ed.execCommand('mceInsertContent', 0, return_text);
* Creates control instances based in the incomming name. This method is normally not
* needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
* but you sometimes need to create more complex controls like listboxes, split buttons etc then this
* method can be used to create those.
* @param {String} n Name of the control to create.
* @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
* @return {tinymce.ui.Control} New control instance or null if no control was created.
createControl : function(n, cm) {
return null;
* Returns information about the plugin as a name/value array.
* The current keys are longname, author, authorurl, infourl and version.
* @return {Object} Name/value array containing information about the plugin.
getInfo : function() {
return {
longname : 'BE Feature Box',
author : 'Bill Erickson',
authorurl : 'https://www.billerickson.net',
infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/example',
version : "0.1"
// Register plugin
tinymce.PluginManager.add( 'be_feature_box', tinymce.plugins.be_feature_box );
view raw be-feature-box.js hosted with ❤ by GitHub
* Plugin Name: BE TinyMCE Feature Box
* Description: This adds a "feature box" button to the TinyMCE content editor
* Version: 1.0.0
* Author: Bill Erickson
* This program is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License version 2, as published by the
* Free Software Foundation. You may NOT assume that you can use any other
* version of the GPL.
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* @package BETinyMCEFeatureBox
* @since 1.0.0
* @copyright Copyright (c) 2018, Bill Erickson
* @license GPL-2.0+
* Feature Box plugin
function be_tinymce_feature_box( $plugin_array ) {
$plugin_array['be_feature_box'] = plugins_url( 'be-feature-box.js', __FILE__ );
return $plugin_array;
add_filter( 'mce_external_plugins', 'be_tinymce_feature_box' );
* Add Feature Box to TinyMCE
* @since 1.0.0
* @param array $buttons
* @return array
function be_add_feature_box_button( $buttons ) {
$buttons[] = 'featurebox';
return $buttons;
add_filter( 'mce_buttons_2', 'be_add_feature_box_button', 20 );