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 a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

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

Let's Talk