How To Create A WordPress TinyMCE Plugin: Ultimate Guide

25

Are you facing problem in creating a WordPress TinyMCE plugin? If yes, then you are at the right place. If you are a WordPress developer, you can customize or expand the WordPress Visual Editor at some point. For example, you might want to add a button to the Visual Editor toolbar so that your client can easily get permission to call the text box or the action button without writing any HTML code.

Here, in this article, we are going to show you how to create a TinyMCE plugin in WordPress.

Requirements

For this guide, you will required basic coding skills, access to a WordPress install where you can test it.

Developing a plugin on a live website is a bad practice. A small mistake in your code can make your site inaccessible. But if you have to do it on the live site, then at least backup WordPress first.

Creating your First TinyMCE plugin

We will start by creating a WordPress plugin to register our custom TinyMCE Toolbar button. On clicking, this button will allow the user to add a link with a custom CSS class.

The source code will be provided at the end of this article, but by then, make the plugin step-by-step.

First, you have to create a directory in your wp-content/plugins folder of WordPress installation. Name this folder as tinymce-custom-link-class.

From here, we will start adding your plugin code.

The Plugin Header

Now you have to create a new file in the plugin directory that we just created and named this file as tinymce-custom-link-class.php. Add this code to the file and save it.

/**

* Plugin Name: TinyMCE Custom Link Class

* Plugin URI: http://www.wpglobalsupport.com/

* Version: 1.0

* Author: WPBeginner

* Author URI: http://www.wpglobalsupport.com/

* Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor

* License: GPL2

*/

However, it is just a PHP comment, which tells WordPress the name of the plugin, as well as the description and author.

Activate your new plugin by visiting Plugins>>Installed Plugins in the WordPress Admin Area, and then activate it next to TinyMCE Custom Link Class Plugin.

Setting Up Our Plugin Class

In case two WordPress plugins work by the same name, then this will cause an error. By wrapping our work in the classroom, we will avoid this problem.

class TinyMCE_Custom_Link_Class {

/**

* Constructor. Called when the plugin is initialised.

*/

function __construct() {

}

 

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

However, with a construct it creates the PHP, that is called when we reach the line $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Any functions that we add inside this class should not conflict with other WordPress plugins.

Start Setting Up Our TinyMCE Plugin

After this, we need to tell TinyMCE that we would like to add our custom buttons to the Visual Editor toolbar. To do this, we can use WordPress’ actions – in particular, init action.

Add the following code within the __construct () function of your plugin:

 

if ( is_admin() ) {

adding_action( ‘init’, array(  $this, ‘setup_tinymce_plugin’ ) );

}

Although it checks whether we are in the WordPress Admin Interface or not. If we are in the Admin interface, then WordPress has asked to run the setup_tinymce_plugin function inside our class after the end of the initial loading routine from WordPress.

Thereafter, add the setup_tinymce_plugin function:

/**

* Check in case the present user can edit the pages or edit the posts. And is using the Visual Editor

* If so, add some filters so we can register our plugin

*/

function setup_tinymce_plugin() {

// Check if the logged in WordPress User can edit Posts or Pages

// If not, don’t register our TinyMCE plugin

if ( ! current_user_can( ‘edit_posts’ ) && ! current_user_can( ‘edit_pages’ ) ) {

       return;

}

// Check if the logged in WordPress User has the Visual Editor enabled

// If not, don’t register our TinyMCE plugin

if ( get_user_option( ‘rich_editing’ ) !== ‘true’ ) {

return;

}

// Setup some filters

add_filter( ‘mce_external_plugins’, array( &$this, ‘add_tinymce_plugin’ ) );

add_filter( ‘mce_buttons’, array( &$this, ‘add_tinymce_toolbar_button’ ) );

}

 

Also, it checks whether the current logged in wordpress user can edit the post or pages. If they cannot check, then there is no other point to register our TinyMCE plugin for that user, as they will never see the visual editor.

Then we check that the user is using the visual editor, because some WordPress users close it through the user>your profile. Again, if the user is not using a visual editor, then we return the function (exit), because we do not need to do anything more.

After all, we add two WordPress filters – mce_external_plugins and mce_buttons to call our functions that will load the required javascript file for TinyMCE, and add a button to the TinyMCE toolbar.

Registering the Javascript File and Button to the Visual Editor

Let’s proceed and add add_tinymce_plugin function:

/**

* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance

*

* @param array $plugin_array Array of registered TinyMCE Plugins

* @return array Modified array of registered TinyMCE Plugins

*/

function add_tinymce_plugin( $plugin_array ) {

$plugin_array[‘custom_link_class’] = plugin_dir_url( __FILE__ ) . ‘tinymce-custom-link-class.js’;

return $plugin_array;

}

 

This function tells the TinyMCE that it requires loading javascript files stored in the $plugin_array array. These javascript files will tell TinyMCE what to do.

In order to tell TinyMCE about the buttons you want to add to Toolbar, we also need to add some code to the add_tinymce_toolbar_button function:

/**

* Adds a button to the TinyMCE / Visual Editor which the user can click

* to insert a link with a custom CSS class.

*

* @param array $buttons Array of registered TinyMCE Buttons

* @return array Modified array of registered TinyMCE Buttons

*/

function add_tinymce_toolbar_button( $buttons ) {

array_push( $buttons, ‘|’, ‘custom_link_class’ );

return $buttons;

}

It pushes two items on the array of TinyMCE buttons: a separator (|), and the programmatic name of our button (custom_link_class).

Save your plugin, and then edit a page or post to view the view editor. Chances are, the Toolbar is not currently displaying:

Do not worry – if we use inspector Console of our web browser, we will see that a 404 error and notice has been generated by TinyMCE, which is telling us that it cannot find our Javascript file.

This is good – it means that we have registered our TinyMCE custom plugin successfully, and now there is a need to create a Javascript file to tell TinyMCE what to do.

Creating the Javascript Plugin

You have to create a new file in your wp-content/plugins/tinymce-custom-link-class folder, and name it tinymce-custom-link-class.js. Add this code to your js file:

(function() {

tinymce.PluginManager.add( ‘custom_link_class’, function( editor, url ) {

});

})();

 

This calls the TinyMCE plugin manager class, which we can use to do a tasks related to many TinyMCE plugins. Specifically, by using the add function we are adding our plugin to TinyMCE.

However, it accepts two items; The name of the plugin (custom_link_class) and an anonymous function.

Furthermore, in case you are familiar with the concept of functions in coding, an anonymous is a function with no name. For example, the function foobar () {…} is a function which we can call elsewhere in our code using foobar ().

With an anonymous function, we cannot call that function anywhere in our code – it is only being called at the point when the add () function is invoked.

Now save your Javascript file, and after that edit a post or page to view the Visual Editor. If everything works well, you will see Toolbar:

Our buttons are not added to that toolbar right now. This is because we only told TinyMCE that we are a custom plugin. Now what we have to say to TinyMCE – that is, add a button to the toolbar.

 

Update your Javascript file by changing your existing code with the following:

(function() {

tinymce.PluginManager.add( ‘custom_link_class’, function( editor, url ) {

// Add Button to Visual Editor Toolbar

editor.addButton(‘custom_link_class’, {

title: ‘Insert Button Link’,

cmd: ‘custom_link_class’,

});

});

})();

Note that there are two arguments in our anonymous function. The first editor is instance – this is TinyMCE visual editor. In the same way, we can call different functions on the pluginManager, we can also call different functions on the editor.

In this type of case, to add a button to the toolbar we are calling the addbutton function.

Now, save your Javascript file, and go back to your Visual Editor. At first sight, nothing has changed. However, if you move your mouse cursor to the right of the top right-hand icon, you should see the tooltip:

We have added a button successfully to the toolbar, but it requires an image. Below the title, add the following parameter to the addButton function: Line:

image: url + ‘/icon.png’,

url is our plugin’s URL. It is easy if we want to reference an image file in our plugin folder, because we can add the image file name to the URL. In this case, we will need an image named icon.png in the folder of our plugin. Use the icon below:

Reload our visual editor, and now you will see your button with the icon:

Defining a Command to Run

If you click on the button right now, then nothing will happen. Let’s add a command to TinyMCE, telling it what to do when our button is pressed.

In our Javascript file, add the following code shown below at the end of the editor.addButton section:

// Add Command when Button Clicked

editor.addCommand(‘custom_link_class’, function() {

alert(‘Button clicked!’);

});

Reload our visual editor, and then click  the button and an alert will confirm that we clicked on the button:

Let’s change the alert with a prompt. And ask the user for the link that they want to wrap around chosen text in the Visual Editor:

// Add Command when Button Clicked

editor.addCommand(‘custom_link_class’, function() {

// Check we have selected some text that we want to link

var text = editor.selection.getContent({

‘format’: ‘html’

});

if ( text.length === 0 ) {

alert( ‘Please select some text to link.’ );

return;

}

// Ask the user to enter a URL

var result = prompt(‘Enter the link’);

if ( !result ) {

// User cancelled – exit

return;

}

if (result.length === 0) {

// User didn’t enter a URL – exit

return;

}

// Insert selected text back into editor, wrapping it in an anchor tag

editor.execCommand(‘mceReplaceContent’, false, ‘<a class=”button” href=”‘ + result + ‘”>’ + text + ‘</a>’);

});

This block of code performs some actions.

First of all, we check whether the user has linked some text to a visual editor. If not, they will see a warning them to select some text to link

After this, we ask them to enter a link, checking again what they have done. If they cancelled, or do not enter anything, then we do not do anything else.

Lastly, we run the execCommand function on the TinyMCE editor, especially run the mceReplaceContent action. This replaces the chosen text with our HTML code, that compromises of an anchor link with class=”button”, by using the user selected.

If everything works well, you will see that your selected text is now a link in the visual editor and text view, with the class set button:

Summing Up

We’ve created WordPress Plugin successfully that adds a button to TinyMCE Visual Editor in WordPress. Also, this guide covered some basic things of TinyMCE API and WordPress filters that are available for TinyMCE integration.

 

We have added the code so that when a user clicks on our custom button, they are asked to choose some text in the visual editor, which they can link to the URLs of their choice.

 

Lastly, our plugin then replaces the chosen text with a linked version that contains a custom CSS class called a button.

 

we hope this blog will help you to create WordPress TinyMCE plugin.

 

However, if you have any problem with the same, then, let me know in the comments section.




Leave a Reply

Your email address will not be published. Required fields are marked *