TinyMCE | advanced plugins / config with functions.php *

Advanced TinyMCE in wordpress

https://www.tiny.cloud/blog/how-to-use-tinymce-premium-plugins-in-wordpress-5/

TinyMCE’s functionality is already provided in WordPress 5 in the Gutenberg Classic Block. Or, if you don’t want to use the Gutenberg block editor, you can read the previous post on how to switch back to the full classic editor. You can also add more advanced TinyMCE functionality to either of those scenarios with the TinyMCE Advanced WordPress plugin.

Regardless of your approach to TinyMCE editing, you can take full advantage of TinyMCE’s premium plugins – such as PowerPaste, Advanced Code Editor, Spell Checker Pro, and Accessibility Checker – with the Advanced TinyMCE Configuration WordPress plugin.

Get started with our premium plugins in three simple steps.

1. Configure the domains on your API Key

Configure your API Key to allow requests from your WordPress domain. If you don’t yet have a Tiny API Key, start with a 14 day free trial of our Cloud Essential or Cloud Professional plan now.

1. Log in to your Tiny account.

2. Click API Key Manager.

3. Indicate that you want to accept requests from your WordPress domain. For example, if your WordPress site is accessed from mysite.com.au, add that domain, then click UPDATE API KEY.

   

2. Install the Advanced TinyMCE Configuration WordPress plugin

The Advanced TinyMCE Configuration WordPress plugin, developed by Andrew Ozz, provides an interface for making more complex configuration changes to the TinyMCE editor, including the ability to activate TinyMCE premium plugins.

NOTE: Although this plugin is powered by Tiny, we are not responsible for providing technical support for it. Reach out to the plugin developer if required.

1. Log in to your WordPress Dashboard, click Plugins, then Add New.

   

2. Search for the Advanced TinyMCE Configuration plugin, then click Install Now.

   

3. Once the plugin is installed, click Activate.

   

3. Configure TinyMCE to use your premium plugins

Once you have installed and activated the Advanced TinyMCE Configuration WordPress plugin, you can go ahead and configure your TinyMCE premium plugins.

1. From within your WordPress Dashboard, click Settings, then select TinyMCE Config.

2. Scroll down to the Defaults section, and click Show the default TinyMCE settings.

   

3. If the

   external_plugins

   setting already exists, click

   Change

   next to the setting, otherwise scroll down and add it as a new option.

   For example, for PowerPaste, add the following code (replacing

   APIKEY

   with your own API Key).

   {"powerpaste":"https:\/\/cdn.tiny.cloud\/1\/APIKEY\/tinymce\/5-stable\/plugins\/powerpaste\/plugin.min.js"}
   

    

   And remember to

   Save Changes

   .

   Separate multiple values with commas if applicable. For example:

   {"a11ychecker":"https:\/\/cdn.tiny.cloud\/1\/APIKEY\/tinymce\/5-stable\/plugins\/a11ychecker\/plugin.min.js", "powerpaste":"https:\/\/cdn.tiny.cloud\/1\/APIKEY\/tinymce\/5-stable\/plugins\/powerpaste\/plugin.min.js"}
   

   Refer to the

   documentation

   for more guidance on plugin names and product versions.

4. Add or modify the plugins setting, adding the name of the plugin (in this case, powerpaste) to the list of values. Important sidenote – the paste plugin and powerpaste plugin cannot be used together as this will cause problems, so make sure to remove this. Additionally, any plugin that is setup as an external_plugin does not need to be included in the plugins declaration.

   

5. Then add any other settings specific to the plugin. Refer to the documentation for more information about plugins and their settings.

   

And you’re done!

Now, when adding or editing your WordPress content, you can go ahead and use the premium plugins you’ve configured.

What next?

Find out how you can complement your solution by managing files and images in the cloud with Tiny Drive.

This is the second part of two posts dedicated to WordPress editors. The first post was all about WordPress text editor, while in this post we will dissect the WordPress TinyMCE editor, and we will bend it to our will. Follow along below as we will show you how to:

• Add custom styles to WordPress TinyMCE editor
• Activate hidden buttons
• Enhance WordPress TinyMCE editor with existing plugins
• Develop custom WordPress TinyMCE plugins
• Use a free WordPress plugin to add styles and buttons to TinyMCE

TinyMCE is a browser-based WYSIWYG editor written in JavaScript and released as open source software under LGPL

WordPress TinyMCE editor

Update: WordPress 5.0 will change the way we write and publish content. Make sure you take a look at our guide: What’s New in WordPress 5.0 (How to Prepare for Gutenberg)

By default, WordPress the TinyMCE editor provides two rows of buttons to create, edit and format post content. The first row (the primary toolbar) includes styling and formatting functionalities. Additional controls allow to add, edit and remove anchors, add the <!–more–> tag, activate the distraction-free mode. All these buttons should look pretty familiar to anyone with basic knowledge of a word processor.

The Toolbar Toggle button toggles the Advanced editor toolbar (the second row of buttons), which provides a pulldown menu of text elements (paragraph, headings and preformatted text), more styling controls, and some additional features (Paste as text, Clear formatting, Special characters, Undo and Redo) that come in handy in many ways.

The Special characters table allow users to quickly add HTML entities

Finally, the question mark button provides a list of keyboard shortcuts which improve the user writing experience.

The TinyMCE shortcuts panel

Now add and style your content into the visual editor, then switch to the text editor. You’ll find the corresponding HTML structure as WordPress will preserve your input when switching from visual to text mode.

Default primary and advanced toolbars provide a good number of functionalities which can be extended with additional buttons and controls. Many of these buttons are available out of the box in TinyMCE, and we just need to activate them to put them in action. Moreover, we can add a good number of advanced functionalities by installing one or more of the existing plugins.

And if all these buttons are not enough, we can enhance the editor with your coolest functionalities, by developing custom plugins.

That being said, let’s start diving from the easiest and most common usage of the API.

Adding custom styles to WordPress TinyMCE editor

Assume you need to provide an easy way to add custom styles into post content from TinyMCE. It’s a two step procedure:

• first, we need to activate a hidden pulldown menu named Styleselect,
• then we have to define each style we want to add to the Styleselect menu.

We can accomplish the first task by filtering the array of TinyMCE buttons. The default toolbar shows one or two rows of buttons, but we can enable up to four toolbar rows thanks to the following filters:

• mce_buttons filters the primary toolbar buttons (the first row), which is always visible;
• mce_buttons_2 filters the advanced toolbar buttons (the second row), which can be toggled on/off by the user;
• mce_buttons_3 inactive by default;
• mce_buttons_4 inactive by default.

We can hook a callback function to one of these filters to show/hide existing buttons, like the Styleselect pulldown menu. The following function enables the menu in the second row:

function my_mce_buttons_2( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

The array_unshift PHP function prepends the styleselect element to the front of the $buttons array.

The Format dropdown menu will show a list of all available CSS styles

Now that the button has been activated, we can register our custom styles by filtering an array of TinyMCE configuration parameters through the tiny_mce_before_init filter. Consider the following function:

function my_tiny_mce_before_init( $mceInit ) {
	$style_formats = array(
		array(
			'title' => 'PHP',
			'block' => 'code',
			'classes' => 'language-php'
		)	
	);
	$mceInit['style_formats'] = json_encode( $style_formats );	
	return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

The style_formats element is a JSON encoded array of elements. Each element sets the configuration parameters of a single menu item. The function above replaces default styles with a single custom element which wraps the selected text in a code.language-php element.

The Styleselect dropdown menu containing a single custom item

In our example, we set three properties for a single menu item:

• title: the title for the menu item;
• block: the block element to produce;
• classes: space separated list of CSS classes to apply to selection.

We added the code element as block, so that it will be applied only once to the full selection. Adding it as inline element would apply the code tag to each selected line.

We can add more items and group them by category, as shown in the following example:

function my_tiny_mce_before_init( $mceInit ) {
	$style_formats = array(
		array(
			'title' => 'Code language',
			'items' => array(
				array(
					'title' => 'PHP',
					'block' => 'code',
					'classes' => 'language-php'
				),
				array(
					'title' => 'CSS',
					'block' => 'code',
					'classes' => 'language-css'
				),
				array(
					'title' => 'HTML',
					'block' => 'code',
					'classes' => 'language-html'
				)
			)
		)	
	);

	$mceInit['style_formats'] = json_encode( $style_formats );
	
	return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

The style_formats element is a multi-dimentional array of parameters. In this example, we’ve added a first level item (Code language) and three sub items (PHP, CSS, HTML). The image below shows the resulting menu.

We can group menu items and reduce the menu size on the screen

TinyMCE applies the styles to the selected elements, but is not aware of these styles, so they won’t be applied to the content in the editor. If a real-time preview is needed, we’ll have to register a custom stylesheet with the add_editor_style() function:

/**
 * Registers an editor stylesheet for a custom theme.
 */
function my_theme_add_editor_styles() {
	add_editor_style( 'css/my-editor-style.css' );
}
add_action( 'admin_init', 'my_theme_add_editor_styles' );

This function registers a stylesheet that will be used by WordPress TinyMCE to style content into the editor. As an example, let’s suppose we’d like to apply different colors to PHP, CSS and HTML code. To accomplish this task, we’ll add the following declarations into css/my-editor-style.css stylesheet:

.language-php{ color: red; }
.language-css{ color: green; }
.language-html{ color: blue; }

TinyMCE will produce the output shown in the following image.

Note: We’ve looked at just few configuration settings, but TinyMCE API gives developers a great control over the editor. See TinyMCE documentation for the full list of elements and properties with some examples of usage.

Enabling WordPress TinyMCE hidden buttons

We can add buttons to the visual editor in several ways. In many cases we are not required to build a custom button because TinyMCE provides a good number of hidden buttons we can easily activate. One of these buttons is the Styleselect dropdown menu, but we have a long list of inactive buttons we can activate by filtering the arrays of buttons through one of the mce_buttons_{n} filters (see TinyMCE docs for the full list of available buttons).

Consider the following example:

function my_mce_buttons_3( $buttons ) {	
	$buttons[] = 'superscript';
	$buttons[] = 'subscript';
	return $buttons;
}
add_filter( 'mce_buttons_3', 'my_mce_buttons_3' );

The callback function above adds the superscript and subscript elements to the end of the array $buttons.

Want to know how we increased our traffic over 1000%?

Join 20,000+ others who get our weekly newsletter with insider WordPress tips!

Subscribe Now

The image shows two extra buttons added to the third row of TinyMCE toolbar

Here is a list of hidden buttons available in WordPress TinyMCE:

• cut
• copy
• paste
• hr
• formatselect
• fontselect
• fontsizeselect
• styleselect
• subscript (previously sub)
• superscript (previously sup)
• backcolor
• newdocument

The image shows the TinyMCE toolbar full of all the available buttons

If none of these buttons suits our needs, we can provide the editor with more functionalities, thanks to a good number of official plugins.

Enhancing the visual editor with TinyMCE plugins

Suppose your goal is to include the TinyMCE Table button into the visual editor through a WordPress plugin.

First, you have to download the Dev Package from TinyMCE website. Unpack the zip file and get the plugin.min.js file from /js/tinymce/plugin/table folder.

Create the following folders in /wp-content/plugins:

• /wp-content/plugins/tinymce-example-plugin/
• /wp-content/plugins/tinymce-example-plugin/mce/table

When you’re done, create a new tinymce-example-plugin.php file into the plugin root folder, and upload the plugin.min.js file into the table folder (see the image below).

The image shows the plugin file structure

Now add the following lines into tinymce-example-plugin.php:

<?php
/**
 * @package TinyMCE_example_plugin
 * @version 1.0
 */
/*
Plugin Name: TinyMCE example plugin
Plugin URI: http://wordpress.org/extend/plugins/#
Description: This is an example plugin 
Author: Your Name
Version: 1.0
Author URI: http://yourdomain.com/
*/ 

In order to include the Table button into the WordPress TinyMCE editor we just need two filters: mce_buttons adds new buttons to TinyMCE primary toolbar (we can use any of mce_buttons_{n} filters, depending on the row where the button has to be shown) mce_external_plugins loads an external TinyMCE plugin.

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

Here is the code of the plugin file:

function example_plugin_register_buttons( $buttons ) {
   $buttons[] = 'table';
	return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );

function example_plugin_register_plugin( $plugin_array ) {
   $plugin_array['table'] = plugins_url( '/mce/table/plugin.min.js', __FILE__ );
   return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

The first function adds a new button to the primary toolbar, while the second function loads a plugin from the specified URL. The plugins_url() function retrieves the absolute URL to the specified file under the plugin directory (read more on the Codex).

Now we can save the file and activate the plugin. The image below shows the enhanced toolbar.

That’s all. Following the same procedure, we can add any existing TinyMCE plugins to the WordPress visual editor.

You can download the plugin .zip file, or view the PHP code of this example on Gist.

Building a TinyMCE plugin

Finally, we can build our TinyMCE custom plugin. Suppose you want to add a button to allow users to wrap the selected content in the following tags:

<pre><code>Selected text</code></pre>

We can even decide to add a CSS class to the tag, to provide support for Prism code highlighter. We need to:

function example_plugin_register_buttons( $buttons ) {
	$buttons[] = 'prism';
	return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );

function example_plugin_register_plugin( $plugin_array ) {
	$plugin_array['prism'] = plugins_url( '/mce/prism/plugin.js', __FILE__ );
	return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

(function() {
	var languages = ['css', 'php', 'html', 'javascript'];
	
	tinymce.PluginManager.add( 'prism', function( editor ){
		
		var items = [];

		tinymce.each( languages, function( languageName ){
			items.push({
				text: languageName,
				onclick: function(){
					var content = tinyMCE.activeEditor.selection.getContent();
					editor.insertContent( '<pre><code class="language-' + languageName + '">' + content + '</code></pre>' );
				}
			});
		});

		editor.addButton( 'prism', {
			type: 'menubutton',
			text: 'Prism',
			icon: 'code',
			menu: items
		});

	});
})();