Monthly Archives: March 2011

Creating custom plugins in TinyMCE

This post shows how to create custom plugins for tinyMCE editor. The following applications and libraries were used:

* Ubuntu 10.04
* TinyMCE 3.4 (http://tinymce.moxiecode.com/download/download.php)

1) First of all, you have to download the tinyMCE editor and decompress it in your WWW folder (/var/www). Else, you will get an error when you try to open the examples included in the zip file.

2) Open the tinyMCE examples in your web browser. For this, you have to go to the following URL -> http://localhost/tinymce/examples/

* In this case, the tinyMCE library was stored in /var/www/phpsites

3) Browse jscripts/tiny_mce/plugins inside your tinyMCE folder. This is the place where all the plugins are stored and here you will find a folder called ‘template’ which includes all the files required to create a template by your own.

4) Create a copy of this folder and rename it to  ‘customPlugin‘ or any other name you want. If you open this folder,you will find several files, but we will be working with ‘editor_plugin_src.js‘ and once your code is ready for deployment you can strip all the LF and rename this file to ‘editor_plugin.js‘.

5) create an ‘img‘ folder inside the ‘customPlugin‘ folder and save this image (This image will be used when you create the plugin button).

6) You need to configure tinyMCE to load the SRC plugins files, but you can avoid this step and just rename the ‘editor_plugin_src.js‘ file to ‘editor_plugin.js‘. Once it is done, open the file and you will find all the code that is required for a plugin, you can customize this code according to your needs.

7) Before adding your new plugin to tinyMCE, you must do some changes on the ‘editor_plugin.js‘ file. The next lines must be changed as follows:

tinymce.create(‘tinymce.plugins.TemplatePlugin’, { -> tinymce.create(‘tinymce.plugins.customPlugin‘, {
ed.addButton(‘template’, {title : ‘template.desc’, cmd : ‘mceTemplate’}); -> ed.addButton(‘customPlugin‘, {title : ‘template.desc’, cmd : ‘mceTemplate’});
tinymce.PluginManager.add(‘template’, tinymce.plugins.TemplatePlugin); -> tinymce.PluginManager.add(‘customPlugin‘, tinymce.plugins.customPlugin);

8 ) Save the changes and open the following file in your editor: tinymce/examples/full.html. This example will be used to test your new custom plugin.

9) Go to the tinyMCE.init section and add your new plugin to the list of available plugins:

10) Save the changes and open the ‘full.html’ file in your web browser (http://localhost/tinymce/examples/full.html).
You will see something like this:

11) If you click this button, a new window will be displayed. This is the default action linked to the plugin template.

12) As you will notice, the button does not have an icon associated to it. In order to fix this, you can go back to the editor_plugin.js file and add the following code:

ed.addButton(‘customPlugin’, {title : ‘template.desc’, cmd : ‘mceTemplate’, image : url + ‘/img/example.gif’}

13) Refresh the page and you will see a new button:

14) You can also add a custom action to this plugin. For this basic example, we will add an action that will display the highlighted text in a new window. To do this, add the following code to the ‘editor_plugin.js’ file:

ed.addCommand(‘customAction’, function(ui) {
var msg = ed.selection.getContent({format:’text’});
if(msg.length == 0 || msg == null)
msg = “highlight some text …”;
alert(msg);
});

15) Modify the action associated to the plugin button:

ed.addButton(‘customPlugin’, {title : ‘template.desc’, cmd : ‘customAction‘, image : url + ‘/img/example.gif’});

16) Reload the web page again and you will get the next functionality: