Little Dropdown Box & Buttons In WordPress 3.9 TinyMCE tutorial

UBLThemes · March 27, 2014, 3:47pm

Hi Guys, with WordPress 3.9 coming out and with there being very little documentation on how to do this as its a little different to the codes used within wordpress 3.8

Most experienced wordpress developers will already know this but for those who do not and need to find a solution for the themes you have which are using shortcode generators here is a little tutorial.

Bare in mind its not oop or anything complex, this tutorial is only to show you how it can be achieved.

Here is the tutorial

I hope this helps some developers who was scratching their heads a little on this.

jrwebstudio · April 16, 2014, 6:44pm

Thank you for this post @UBLThemes. Really saved me some time

UBLThemes · April 16, 2014, 7:19pm

You’re welcome

thezoc · April 20, 2014, 4:33pm

Thank you !

Webbu · April 20, 2014, 5:50pm

Hi Good article but there was a wrong code. I already send a comment from your page but I think you didn’t see it. below code at the end of the page:

function ubl_add_tinymce() {
     
    global $typenow;
    if(!in_array($typenow, array('post', 'page'))) return ;
 
    add_filter( 'mce_external_plugins', 'ubl_add_tinymce_plugin' );
    add_filter( 'mce_buttons', ubl_add_tinymce_plugin );
     
}
 
// inlcude the js for tinymce
function ubl_add_tinymce_plugin( $plugin_array ) {
 
    $plugin_array['ubl_location'] = get_template_directory_uri() . '/js/Shortcodes_js.js';
    return $plugin_array;
     
}
 
// Add the button key for address via JS
function ubl_add_tinymce_button( $buttons ) {
 
    array_push( $buttons, shortcodes );
    return $buttons;
     
}
 
add_action( 'admin_head', ubl_add_tinymce );

has to be like this

add_filter( ‘mce_buttons’, ubl_add_tinymce_plugin );

change to

add_filter( ‘mce_buttons’, ubl_add_tinymce_button );

If I didn’t remember wrong this will fix the problem.

anon51813007 · April 26, 2014, 5:31am

I tried customising your code and this part

selector: ".wp-editor-area",

causes “Visual and Text” tab not working… any fix for this?

thanks

UBLThemes · April 26, 2014, 12:37pm

codeex said
I tried customising your code and this part
selector: ".wp-editor-area",
causes “Visual and Text” tab not working… any fix for this?

thanks

Yes I’m about to update it, sorry been busy with updating themes on all our profiles

I’ll post the fix on here in a couple of hours when I get to my mac

anon51813007 · April 26, 2014, 2:20pm

thanks, removing that fixed my issue…

UBLThemes · April 28, 2014, 7:40am

codeex said
thanks, removing that fixed my issue…

Sorry about the late reply, been away all weekend.

Here is the fix for the editor, the whole code:

Php side:

function ubl_add_tinymce() {
	
		global $typenow;
		if(!in_array($typenow, array('post', 'page'))) return ;
	
		add_filter( 'mce_external_plugins', 'ubl_add_tinymce_plugin' );
		add_filter( 'mce_buttons', 'ubl_add_tinymce_button' );
	
	}
	
	// inlcude the js for tinymce
	function ubl_add_tinymce_plugin( $plugin_array ) {
	
		$plugin_array['ubl_location'] = get_template_directory_uri() . '/js/Shortcodes_js-3.9.js';
		return $plugin_array;
	
	}
	
	// Add the button key for address via JS
	function ubl_add_tinymce_button( $buttons ) {
	
		array_push( $buttons, 'shortcodes' );
		return $buttons;
	
	}
	
	add_action( 'admin_head', 'ubl_add_tinymce' );

Javascript:

/*global tinyMCE, tinymce*/
/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, unused:true, curly:true, browser:true, devel:true, maxerr:50 */

(function() {
"use strict";	
document.getElementById("content-tmce").onclick = function(){
document.getElementById("mce_30").style.display = "block";
document.getElementById("wp-content-wrap").classList.remove("html-active");
document.getElementById("wp-content-wrap").className += " tmce-active";
}
document.getElementById("content-html").onclick = function(){
document.getElementById("mce_30").style.display = "none";
document.getElementById("wp-content-wrap").classList.remove("tmce-active");
document.getElementById("wp-content-wrap").className += " html-active";
}
	tinymce.init({
		selector: ".wp-editor-area",
		toolbar: "shortcodes",
		setup: function(editor) {

			tinymce.PluginManager.add( 'ubl_location', function( editor, url ) {
	
				editor.addButton( 'shortcodes', {
					type: 'listbox',
					text: 'Shortcodes',
					icon: false,
					tooltip: 'Editor Shortcodes',
					classes: 'ublnewlist',
					onselect: function(e) {
					}, 
					values: [
						
						//SHORTCODE STARTS
						{text: 'H1 Title', onclick : function() {
							
							var selected = tinyMCE.activeEditor.selection.getContent();
							var content = '';
							var h1titleclass = prompt("Would you like a custom class?", "");
							
							if(h1titleclass != ''){
								h1titleclass = ' class="'+h1titleclass+'"';
							}
							
							if (selected !== '') {
								content = '[h1'+h1titleclass+']' + selected + '[/h1]';
							} else {
								content = '[h1'+h1titleclass+'][/h1]';
							}
							
							tinymce.execCommand('mceInsertContent', false, content);
						}},
						// END SHORTCODE
						
						/*
						
						Keep adding adding shortcodes as shown on the tutorial here
						
						*/
					]
		
				});
		
		  });
		
		}
		
	});

})();

I hope this helps guys

martin.stedron · April 28, 2014, 9:36am

Hi,

thank you for the tutorial. It seems like text editor is not working. When I change to ‘Text’ tab, content is still formated like in Visual editor.

anon51813007 · April 29, 2014, 5:02am

matrasoriginal said
Hi,

thank you for the tutorial. It seems like text editor is not working. When I change to ‘Text’ tab, content is still formated like in Visual editor.

try this

(function($) {
"use strict";   

   tinymce.PluginManager.add( 'ubl_location', function( editor, url ) {
      
      editor.addButton( 'shortcodes', {
         type: 'listbox',
         icon: false,
         title:  'Shortcodes',
         onclick : function(e) {},
         values: [
            {text: 'Alerts',onclick:function(){
               //code here
            }},
         ]
      });

   });

})(jQuery);

martin.stedron · April 29, 2014, 7:49am

codeex said
matrasoriginal said
Hi,

thank you for the tutorial. It seems like text editor is not working. When I change to ‘Text’ tab, content is still formated like in Visual editor.

try this
(function($) {
"use strict";   

   tinymce.PluginManager.add( 'ubl_location', function( editor, url ) {
      
      editor.addButton( 'shortcodes', {
         type: 'listbox',
         icon: false,
         title:  'Shortcodes',
         onclick : function(e) {},
         values: [
            {text: 'Alerts',onclick:function(){
               //code here
            }},
         ]
      });

   });

})(jQuery);

It works! Thank you!

anon51813007 · April 29, 2014, 7:56am

matrasoriginal said
codeex said
matrasoriginal said
Hi,

thank you for the tutorial. It seems like text editor is not working. When I change to ‘Text’ tab, content is still formated like in Visual editor.

try this
(function($) {
"use strict";   

   tinymce.PluginManager.add( 'ubl_location', function( editor, url ) {
      
      editor.addButton( 'shortcodes', {
         type: 'listbox',
         icon: false,
         title:  'Shortcodes',
         onclick : function(e) {},
         values: [
            {text: 'Alerts',onclick:function(){
               //code here
            }},
         ]
      });

   });

})(jQuery);
It works! Thank you!

Your Welcome!

Topic		Replies	Views
Creating Custom Shortcodes Button in WP TinyMCE Editor Theme Authors	3	1510	October 17, 2017
Adding short codes to WYSIWYG editor? Theme Authors	8	1851	November 9, 2010
Need a WP Developer))) Looking For wordpress	1	606	May 9, 2016
Light Shortcode WordPress Plugin. You can use it for your premium themes. Theme Authors	6	1353	November 25, 2013
Tutorial: How to change Zilla Shortcodes for WP 3.9 Theme Authors	21	2057	September 26, 2014

Little Dropdown Box & Buttons In WordPress 3.9 TinyMCE tutorial

Related topics