Little Dropdown Box & Buttons In WordPress 3.9 TinyMCE tutorial


#1

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.


#2

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


#3

You’re welcome :slight_smile:


#4

Thank you !


#5

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.


#6

I tried customising your code and this part

selector: ".wp-editor-area",

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

thanks


#7
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 :wink:


#8

thanks, removing that fixed my issue… :slight_smile:


#9
codeex said

thanks, removing that fixed my issue… :slight_smile:

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 :slight_smile:


#10

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.


#11
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);

#12
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!


#13
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! :slight_smile: