Adding Tinymce Toolbar Button In WordPress 3.9 & Above WYSIWYG Editor

Home/Uncategorized/Adding Tinymce Toolbar Button In WordPress 3.9 & Above WYSIWYG Editor

Adding Tinymce Toolbar Button In WordPress 3.9 & Above WYSIWYG Editor

WordPress changed the rules regarding it’s TinyMCE integration in the WYSIWYG html editor. With the WP 3.9 version you get the TinyMCE version 4 and the following advantages:

  • New UI and UI API.
  • New theme.
  • Revamped events system/API.
  • Better code quality, readability and build process.
  • Lots of (inline) documentation.
  • And generally many improvements everywhere

However if you already have a plugin or theme with TinyMCE button, you should expect breakdowns especially for more complicated API integrations.

Wordpress toolbar tinymce button

In this article you can get the code to add your own button in the WP 3.9 and above editors. First add the following code to the functions.php of your theme, or in your plugin files:

 

add_action( 'admin_head', 'fb_add_tinymce' );
function fb_add_tinymce() {
global $typenow;

// only on Post Type: post and page
if( ! in_array( $typenow, array( 'post', 'page' ) ) )
return ;

add_filter( 'mce_external_plugins', 'fb_add_tinymce_plugin' );
// Add to line 1 form WP TinyMCE
add_filter( 'mce_buttons', 'fb_add_tinymce_button' );
}

// inlcude the js for tinymce
function fb_add_tinymce_plugin( $plugin_array ) {

$plugin_array

['wpicode_shortcodes'] =  get_template_directory_uri() .'/includes/tinymce.js';
// Print all plugin js path
// var_dump( $plugin_array );
return $plugin_array;
}

// Add the button key for address via JS
function fb_add_tinymce_button( $buttons ) {

array_push( $buttons, 'wpicode_shortcodes_button' );
// Print all buttons
// var_dump( $buttons );
return $buttons;
}

This will take care of registering the button.

Then create your THEME/includes/tinymce.js script in the includes folder of your theme and add the following code:


(function() {
tinymce.create('tinymce.plugins.wpicodeShortcodeMce', {
createControl : function(n, cm) {

},
init : function(ed, url){

ed.addButton('wpicode_shortcodes_button',{
title: "Insert Shortcode",
image: url +"/images/shortcodes.png",
type: 'listbox',
classes : 'widget btn wpicode',
values :[
{text:'Columns',
menu:[
{text:'One Half',value:'half',onclick:function(){
var mceSelected = tinyMCE.activeEditor.selection.getContent();if ( mceSelected ) { var wpicodeDummyContent = mceSelected;} else { var wpicodeDummyContent = 'Sample Content';}
tinyMCE.activeEditor.selection.setContent('[wpicode_column size="one-half" position="first"]<br />'+wpicodeDummyContent+'<br />[/wpicode_column]');
}},
{text:'One Third',value:'third',onclick:function(){
var mceSelected = tinyMCE.activeEditor.selection.getContent();if ( mceSelected ) { var wpicodeDummyContent = mceSelected;} else { var wpicodeDummyContent = 'Sample Content';}
tinyMCE.activeEditor.selection.setContent('[wpicode_column size="one-third" position="first"]' + wpicodeDummyContent + '[/wpicode_column]');
}}
] },
{text:'Media Elements',
menu:[
{text:'Flex Slider',value:'flexslider',onclick:function(){
var mceSelected = tinyMCE.activeEditor.selection.getContent();if ( mceSelected ) { var wpicodeDummyContent = mceSelected;} else { var wpicodeDummyContent = 'Sample Content';}
tinyMCE.activeEditor.selection.setContent('

    ');
    }}
    ] }
    ] });

    }

    });
    tinymce.PluginManager.add("wpicode_shortcodes", tinymce.plugins.wpicodeShortcodeMce);

    })();

     

    That’s it, now you will get a button that will show columns in your editor. You can change the shortcodes.png image to style your button, and add new dropdowns as you wish.

    Good luck!

    2017-05-09T20:11:16+00:00 May 27th, 2014|Uncategorized|0 Comments