Howto use Tiny MCE in Zope3

since i’m not very experienced with Zope 3 (yet) i had some troubles to turn a text input field in my own content type into a Rich Text Editor using z3c.widget.tiny. This is how i finally got it working (thanks to dobee):

in my interfaces.py file for my content type i defined a normal Text field:

...
description = zope.schema.Text(
    title = u"Description",
    description = u"describe yourself",
    required = False)
...

in my viewclass file (browser.py) i use formlib to handle things, therefore i had to use custom_widget to use the TinyWidget:

import zope.traversing.browser
from zope.formlib import form
from zope.app.pagetemplate import ViewPageTemplateFile
from z3c.widget.tiny.widget import TinyWidget
from training.forms import interfaces, mycontent

class myTinyWidget(TinyWidget):
    mce_language = 'de'
    mce_theme_advanced_disable = 'bold,italic'
    mce_cleanup = 'false'
    mce_entity_encoding="raw"

class AddMyContent(form.AddForm):
    form_fields = form.FormFields(interfaces.IMyContent)
    form_fields['description'].custom_widget = myTinyWidget

    def create(self, data):
        return mycontent.MyContent(**data)

    def add(self, ob):
        count = 0
        while 'mycontent-%i' %count in self.context:
            count += 1;
        self.context['mycontent-%i' %count] = ob
        self._finished_add = True
        self._name = 'mycontent-%i' %count
        return ob

    def nextURL(self):
        return zope.traversing.browser.absoluteURL(
            self.context, self.request) + '/' + self._name

class DisplayMyContent(form.DisplayForm):
    form_fields = form.FormFields(interfaces.IMyContent)

    template = ViewPageTemplateFile('view.pt')

class EditMyContent(form.EditForm):

    form_fields = form.FormFields(interfaces.IMyContent)
    form_fields['description'].custom_widget = myTinyWidget

    actions = form.EditForm.actions.copy()

    @form.action("Apply and View")
    def handle_edit_view_action(self, action, data):
        self.actions['form.actions.apply'].success(data)
        url = zope.traversing.browser.absoluteURL(
                 self.context, self.request)
        self.request.response.redirect(url)

some notes:
form_fields[‘fieldxy’].custom_widget defines the widget to use for this field
we use a class derived from form.DisplayForm to handle the display of the fields using their display widgets

and now comes the part that took me days to figure out 😉 :
when coding the page template we would normally use the display widgets of the fields like this:

My name is <span tal:replace="structure view/widgets/name"/>

but for the description field which uses the Tiny MCE widget for editing text, this doesn’t work, because the normal display widget of a Text field will escape HTML entities (& becomes a & and so on) but we need the unescaped HTML code as we add formatting to the text through Tiny MCE. Therefore we need to access the description field directly in the page template and use structure to render the output as well:

<p tal:replace="structure context/description">
     description
</p>

now everything works as expected 🙂