Building custom plugin for TinyMCE
My previous post was about awesome code syntax highlighter JS library I have converted into extension for BlogEngine and no so awesome button I’ve added to TinyMCE to insert code snippets. Let’s make it better by building custom plugin that will let us select language and enter actual code in the pop-up window eliminating messing up with TinyMCE editor itself.
We will leverage “example” plugin that exists in the <TinyMCE>/plugins directory exactly for this purpose. This is how you enable and use it:
- Go to the editor’s page, the one that has “tinyMCE.init()” function. In BlogEngine, it is “~/admin/tinyMCE.ascx”.
- Locate “tinyMCE.init” and add “example” plugin to the plugins list.
- Add “example” button to the list of buttons.
... plugins: "inlinepopups,fullscreen...advlink,example", ... theme_advanced_buttons1: "fullscreen,code,|,cut,copy,paste...,example", ...
If you save and go run your application, you should see new button with “T” letter on it added to the TinyMCE toolbar and if you click on it you should see simple example dialog. This is basically fit our scenario, all we need is rename and transform.
In the file explorer window, copy/paste “example” folder and rename it to “insertcode” – that is going to be a name for new plugin. Now you can switch to Visual Studio (or whatever editor you are using) and start shaping this example your way.
Follow these simple steps:
- Replace HTML controls in the “dialog.htm” with your own. I’ve added list box and text area.
- Edit “dialog.js” to insert into TinyMCE code snippet built from controls created in previous step.
- Adjust “editor_plugin_src.js” by renaming “example” into “insertcode” etc.
- Compress JS using this site and copy compressed version to “editor_plugin.js”
- Create your own toolbar button, Paint.NET is more than enough for this task.
Once you done with plugin, hook it up to TinyMCE exactly as we did with "example" in the beginning of this topic. Just replace "example" with "insertcode" in two places in "init" function and we all set. If you take a look at plugin code in the attached file, you'll see that it is pretty simple stuff. In the end you should have syntax highlighter extension with full support in the web based editor.
The code is updated and installation instructions simple as usual – just copy and replace files to your BlogEngine site. If you already have installed syntax highlighter from previous post, you only need to copy files in “editors” folder and “admin/tinyMCE.ascx”, nothing else changed. Feedback, as always, appreciated.
