How do I enable the advanced mode of the TinyMCE editor for Plone?

The TinyMCE editor is a feature-rich WYSIWYG editor for Plone, similar to Kupu. However, many of TinyMCE’s best features are hidden away in so-called “advanced mode”. Installing TinyMCE is straightforward – install it like you would any other Plone product.

To enable advanced mode:

  1. In the ZMI, go to /portal_skins/tinymce/tinymce_wysiwyg_support. Make a copy into “custom”.
  2. Edit the file in custom. Near the top there is a line that says: <script type=“text/javascript” charset=“iso-8859-1” tal:attributes=“src string:${portal_url}/jscripts/tiny_mce/tiny_mce_init.js”> </script> — Delete this line or comment it out.
  3. In its place, add this code: <script language=“javascript” type=“text/javascript”>
    tinyMCE.init({
    theme: “advanced”,
    mode: "specific    textareas"
    });
    </script>

Within the body of the tinyMCE.init function, you can add other lines to change the appearance of the toolbar, change its location, add more buttons, etc.

Here is a reference of all the settings for the TinyMCE editor:
http://tinymce.moxiecode.com/tinymce/docs/reference_configuration.html

Pay special attention to the function theme_advanced_buttons<1-n>_add: you can use it to add more buttons to the toolbar. For example, to add an undo button to row 2, put this line into tinyMCE.init:
theme_advanced_buttons2_add: “undo”

A full list of available buttons can be found here:
http://tinymce.moxiecode.com/tinymce/docs/reference_buttons.html

Remember that customizing the TinyMCE editor is only possible when using the Advanced theme.

Back to top