Zope and Rich-Text-Editors

Recent demand for loosely coupling (no monkey-patching) RTE and Zope made me search for the easiest thing that could possibly work. I decided to use TinyMCE, a self-contained Rich-Text-Editor written in Javascript and - as you will see in a few seconds - easy to integrate with Zope (any version).

You need to download the TinyMCE files and install them on filesystem. Then in your Zope2 instance create a LocalFS object, configure it to point to that folder, name it 'tinymce' - its about the same with Zope3, but instead of LocalFS you simply need to configure a resourceDirectory instead. Thats about it, anything left is to adjust your products/forms to use the TinyMCE library.

Let's look at ZWiki for a Zope2 integration example.

First create a fresh ZWiki object in ZMI. Add a 'lines' property named 'allowed_page_types' to the ZWiki folder, set its value to 'html' (thus enabling HTML pages only). In the ZWiki folder access screen disable 'Zwiki: Add Comments' (Comments won't get rendered correct in HTML mode anyway). What's left is adding the TinyMCE controls to the editform template - in file 'skins/zwiki/editform.pt' add the lines inside the 'head_slot' slot:

    <script language="javascript" type="text/javascript"
        src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
    <script language="javascript" type="text/javascript">
        tinyMCE.init({
                mode : "textareas",
                theme : "advanced"
        });
    </script>

This changes your Textarea contol into a HTML RTE editor (check TinyMCE docs for different configuration options) - now restart your instance, browse to the ZWiki folder and edit a page.