Enabling TinyMCE Plugins

TinyMCE is the wysiwyg editor we use in Confluence. You can now customise and enable TinyMCE plugins in Confluence by converting it as an Atlassian plugin. You simply need to define a plugin descriptor and provide a small snippet of javascript to configure your plugin.

Defining the TinyMCE Plugin Resources

You will need to define the TinyMCE plugin resources (e.g. editor_plugin.js) in a web resource module with an added context of 'wysiwyg-editor'. Below is an example plugin descriptor for the TinyMCE Search & Replace plugin.

 <atlassian-plugin name='TinyMCE Search Replace Plugin' key='tinymce.searchreplace.plugin'>
   ...
    <resource name="searchreplace/" type="download" location="searchreplace/"/>

    <web-resource name='TinyMCE Search Replace Web Resources' key='tinymce-searchreplace-resources'>
        <resource name="searchreplace.js" type="download" location="searchreplace/editor_plugin.js"/>
        <resource name="searchreplace-adapter.js" type="download" location="searchreplace/confluence-adapter.js"/>
        <context>wysiwyg-editor</context>
    </web-resource>
</atlassian-plugin>

Configuring TinyMCE Plugin Settings

To enable the TinyMCE plugin, you will need to configure the settings object that is typically passed to TinyMCE's init() method. To do this, simply add some javascript to register your configuration logic with
AJS.Editor.Adapter.addTinyMcePluginInit. The following code enables the search/replace plugin and adds the search and replace buttons to the second row of the toolbar.

 AJS.Editor.Adapter.addTinyMcePluginInit(function(settings) {
    settings.plugins += ",searchreplace";
    settings.theme_advanced_buttons2 += ",search,replace";
});

Please note that if you are enabling several buttons on the toolbar, the buttons may not appear on pages using the Clickr theme. The theme has a fixed screen width, hence it is better to display the buttons on the second row of the toolbar.