Create a Plugin For TinyMCE Editor

How to Create a Plugin For TinyMCE Editor

My last post about TinyMCE Editor was “How to add multilevel drop down in a TinyMCE Editor Menu Button.”, in that post i have described about how to to customize tinyMCE Editor.

In this post i am going to share with “How to build a plugin for TinyMCE Editor”. During this i use the same customization i have explain in last post i.e. How to add Multilevel drop-dwon on a menu button of toolbar.

So, I am Starting now : For creating a plugin you firstly have to be familiar with the folder structure to be made for a plugin.

One thing you have to remember is, you can use your custom developed plugin when you have all files of tinyMCE Editor and you are loading tinyMCE scripts from your server.(Will describe later why.).

Folders you have to create are :

Find the Directory where you have placed tinyMCE Editor’s files, you will see a folder structure like as follows:

Now go to “plugins” directory, Here you will find all of exsisting plugins.
Here you have to create a directory, name of directory will be the name of your plugin. I have created a folder with name ‘mergefield’ because i want to create a custom plugin whose name is mergefield.
Now go to the directory you have created in previous step and here create a file name “plugin.js”.
Edit plugin.js and write your custom code here. But your code will be resides in the below function
As descirbed in my last post we have to add a menu button on toolbar so the custom code plugin looks like as follows:

/**
- Example plugin that adds a toolbar button and menu item. */
/* editor.addButton(name, settings); : this code will adds a menu button on toolbar */ </script>

Now may be the questions comes into you like, how tinyMCE Editor knows that it have to include your plugin ?

So, the answer is : You have to call your plugin when the Editor will initialise.

For calling plugin you have to use the following code in that file you are including the TinyMCE Editor.

<script type="text/javascript">
    tinymce.init({
        selector : "textarea",
        plugins  : "plugin_names_to_load_on_initialisation_of_editor",
        toolbar  : "Buttons_and_menu_buttons_to_show_on_toolbar_of_editor"
    });
</script>

For the Multilevel drop-down menu (mergefield : my plugin), i have included the plugin mergefield and a toolbar button mergefield and for this the code looks like as follows :

<script type="text/javascript">
    tinymce.init({
        selector: "textarea",
        plugins: ["contextmenu advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste mergefield "],

        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | demo | mergefield"
    });
</script>

Hope this article helped you in creating your custom plugin for TinyMCE Editor.