Enabling TinyMCE Plugins

This documentation refers to a feature in the Confluence 3.1 release cycle. It will not work in Confluence 3.0 or before. Please check out our Milestone release notes to learn more about our milestone process for Confluence 3.1

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.

Please note that this does not mean that all TinyMCE plugins are guaranteed to work in Confluence. Confluence is using a customised version of TinyMCE, so the plugins may not work 'out of the box' and could require some changes.

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.

searchreplace-adapter.js
 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.

Was this page helpful?

Have a question about this article?

See questions about this article

Powered by Confluence and Scroll Viewport