[Rourke]

I want to customize the TinyMCE editor with so called mini-plugins. For example, I have the emoticons mini-plugin that I want to use. When I place it in the folder /wp-includes/js/tinymce/plugins I’m able to use it through a custom wordpress plugin or the functions.php from my theme. But as far as I know this mini-plugin can get removed when wordpress gets updated.

That’s why I want to know if it’s possible to use these TinyMCE mini-plugins inside my (child) theme instead of just throwing them into core?

[Rourke]

Actually just found the answer by looking at another plugin. There is a hook for it: mce_external_plugins.

I had some trouble finding it, so it might be usefull for someone else.

[Rourke]

I’m not getting this to work.

I have the following code for adding the emoticons plugin. The plugin file is located at /wp-content/themes/theme-child/js/tinymce/emoticons/plugin.min.js:

add_filter('mce_external_plugins', 'my_custom_plugins');
function my_custom_plugins($plugins_array) {
	$plugins = array('emoticons'); //Add any more plugins you want to load here

	//Build the response - the key is the plugin name, value is the URL to the plugin JS
	foreach ($plugins as $plugin ) {
		$plugins_array[ $plugin ] = get_stylesheet_directory_uri() . '/js/tinymce/' . $plugin . '/plugin.min.js';
	}
	return $plugins_array;
}

And for the buttons customization I use:

function bbp_enable_visual_editor( $buttons = array() ) {
	
	$buttons['tinymce'] = array( 
		'toolbar1' => 'bold, italic, underline, strikethrough, blockquote, alignleft, aligncenter, alignright, alignjustify, justifyfull, bullist, numlist, outdent, indent, undo, redo, link, unlink, table, fullscreen',
		'toolbar2' => 'formatselect, fontselect, fontsizeselect, styleselect, strikethrough, outdent, indent, pastetext, removeformat, charmap, wp_more, emoticons, forecolor, wp_help,media,image', // 2nd row, if needed
		'plugins'  => 'paste,emoticons'
	);
	$buttons['quicktags'] = array ('buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close');
	return $buttons;
}
add_filter('bbp_after_get_the_content_parse_args', 'bbp_enable_visual_editor');
add_filter('mce_buttons', 'bbp_enable_visual_editor');

It doesn’t load the visual editor, unless I remove emoticons from the plugins. I don’t see the my_custom_plugins() function doing anything. What am I doing wrong?

[Pascal Casier]

Hi,
Can’t test it now, but are you sure get_stylesheet_directory_uri() is returning /wp-content/themes/theme-child and not /wp-content/themes ?

Try to var_dump inside your function to make sure your function is executed

Pascal.

[Rourke]

get_stylesheet_directory_uri() in a var_dump() returns http://www.site.com/wp-content/themes/hueman-child so that seems to be good.

[Pascal Casier]

Just to be sure, can you do a var_dump of $plugins_array just before the return in your my_custom_plugins function ?
Can you confirm it’s an array, because you did not initialize it as one:
$plugins_array = array();

and also remove it as parameter from your function…

See https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins

[Rourke]

Thanks @casiepa, you got me on the right track.

In the proces I must have removed $arg['teeny'] = false; somewhere. Adding that made it work.

I now made it like this, and it works like a charm:

/* TinyMCE configuration */
function bbp_load_custom_config( $config = array() ) {
	$config['tinymce'] = array( 
		'toolbar1' => 'bold, italic, underline, strikethrough | blockquote | alignleft, aligncenter, alignright, alignjustify | bullist, numlist | undo, redo',
		'toolbar2' => 'link, unlink | outdent, indent | removeformat',
		'plugins'  => 'wplink'
	);
	$config['quicktags'] = array ('buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close');
	$config['teeny'] = false;
	return $config;
}
add_filter('bbp_after_get_the_content_parse_args', 'bbp_load_custom_config');
add_filter('mce_buttons', 'bbp_load_custom_config');

/* TinyMCE loading external plugins */
add_filter('mce_external_plugins', 'my_custom_plugins');
function my_custom_plugins() {
	// Reading directories
	$plugins = glob(get_stylesheet_directory() . '/js/tinymce/*' , GLOB_ONLYDIR);

	if(count($plugins) > 0){
		// Get the plugin name = directory name, and the URL
		foreach ($plugins as $plugin ) {
			$plugin_name = pathinfo($plugin, PATHINFO_BASENAME);
			$plugins_array[ $plugin_name ] = get_stylesheet_directory_uri() . '/js/tinymce/' . $plugin_name . '/plugin.min.js';
		}
	}

	return $plugins_array;
}

The last function assumes all external plugins are in /wp-content/themes/child-theme/js/tinymce/ and loads them into TinyMCE.

[Pascal Casier]

Great !

We all deserve a good weekend now with coffee … or something stronger 🙂

Enjoy bbPress !
Pascal.