In our case, for the K.U.Leuven, we created a package called kuleuven.tinymce using zopeskel, based on a theme package template

paster create -t plone3_theme kuleuven.tinymce

Just to start with, whatever package you wish to put the customized settings in, you should add Products.TinyMCE as a dependency of that package.  Of course it’s a default dependency of Plone itself, but for testing purposes it should be added in the package you’re working in.

Setting up the dependency:

• setup.py: add

  Products.TinyMCE

  to the install_requires section

• configure.zcml: add

  <include package="Products.TinyMCE" />

• profiles/default/metadata.xml: add

  <dependencies>
    <dependency>profile-Products.TinyMCE:TinyMCE</dependency>
  </dependencies>

In this post we’ll concentrate on the changes that you can do by just changing the default xml settings for tinymce. With these you can already:

• add your own custom css classes (styles) that can be applied via the style or format dropdown in the visual editor
• customize which buttons should be shown in the toolbar

If you would like to see all the xml settings that Products.TinyMCE has:

• go to the ZMI of a standard Plone site
• portal_setup – tab Export
• select TinyMCE settings and click ‘Export selected steps’ at the bottom of the page
• This will save a setup_tool-somedateandtime.tar.gz file containing the tinymce.xml file to your computer

An example of the default full xml, can be found as an attachment of this blog (tinymce.xml.default)

Adding the custom setting to your package

• Make a copy of the tinymce.xml file and place this inside the profiles/default directory inside your package
• Remove all settings irrelevant to your setup (the sections you remove will automatically be taken from the Products.TinyMCE default tinymce.xml file)
• In attachtment you’ll also find an example of a full custom tinymce.xml file (tinymce.xml.kuleuven)
• Note: this file should always be called tinymce.xml in your packages
  

Adding your own styles

Customizing the styles can be done via the <styles> section inside the <layout> section of the tinymce.xml file.

<layout>
  <styles purge="True">
    <element value="Heading2|h2"/>
    <element value="Heading3|h3"/>
    <element value="Heading4|h4"/>
    <element value="Literal|pre"/>
    <element value="Blockquote|blockquote"/>
    <element value="Heading cell|th|"/>
    <element value="Lightblue row|tr|alttablecolor"/>
    <element value="Lightblue cell|td|alttablecolor"/>
  </styles>
</layout>

You can either add to the existing styles of Products.TinyMCE, or remove all the default ones and only set your own.
To override the existing ones and just use your own styles, use the purge=”True” inside the styles. To add to the existing ones, set purge=”False”.
You can adjust the section <tablestyles> in the same way.

Hiding/showing buttons

Customizing which buttons to show can be done via the <toolbar> section the tinymce.xml file.

<toolbar>
<toolbar_anchor value="True"/>
<toolbar_hr value="True"/>
<toolbar_cut value="True"/>
<toolbar_paste value="True"/>
<toolbar_justifyleft value="True"/>
<toolbar_justifright value="True"/>
<toolbar_justifycenter value="True"/>
<toolbar_inserttime value="False"/>
<toolbar_tablecontrols value="True"/>
<toolbar_undo value="True"/>
<toolbar_redo value="True"/>
<toolbar_image value="True"/>
<toolbar_save value="True"/>
...
</toolbar>

• For every button you want to show, give it a value=”True” in the xml.
  For every button you want to hide from the toolbar, give it a value=”False”.

The purge setting for this hasn’t been tested by us, however you might want to be careful setting it, since you need to set the default setting for each button separately. If you want to hide a button that’s shown by default, you need to remove the default button (which has the value=”True” setting- and addthe button in your custom list with the value=”False” setting. In combo with purge=”False” you would just have both buttons, each with a different value, and that value can’t be true and false at the same time. Hope this makes sense, but feel free to test it and correct me if I’m wrong.

We just added all buttons again, and set the value of each one according to our preference.

Plone Control Panel options and an easy export of customized settings

The reason we made our own package including these settings, is that we needed to have the same settings installed over dozens of Plone sites. If you have only one site, you can just adjust all this via the TinyMCE section in the plone_control_panel.

If you decide later that you do want to have the same tinymce settings on several sites, you can just export the settings you did in the plone_control_panel.

• go to the ZMI – portal_setup – tab Export
• select TinyMCE settings and click ‘Export selected steps’ at the bottom of the page
• This will save a setup_tool-somedateandtime.tar.gz file containing the tinymce.xml file to your computer
• copy this file to your package (profiles/default or upgradeprofile)

If you’re used to working with GenericSetup: you can also just make a compare of xml differences using the Snapshots and Comparison tab in the portal_setup, to help with deciding which sections you actually need in your own tinymce.xml. More info on this can be found at http://plone.org/documentation/kb/genericsetup/exports-snapshots-and-comparisons