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.

be-tinymce-feature-block.php

<?php
/**
 * 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
 * FOR A PARTICULAR PURPOSE.
 *
 * @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 );

be-feature-box.js

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

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk