Skip to main content

A rich text widget using TinyMCE for Dolmen

Project description

dolmen.widget.tinymce is a package that provides a useable and pluggable way to render a text field as a WYSIWG editor in a zeam.form Form.

Example

We are going to develop here a small example, to demonstrate the use of dolmen.widget.tinymce. First, we need to create a model content with a text field:

>>> import grokcore.component as grok
>>> from zope.interface import Interface
>>> from zope.schema import Text
>>> from zope.schema.fieldproperty import FieldProperty

>>> class ICave(Interface):
...   paintings = Text(title=u'Description of the cave paintings')

>>> class Grotto(grok.Context):
...   paintings = FieldProperty(ICave['paintings'])

We have now a model that defines a text field. We want to edit/view this content, using a rich editor, allowing to input rich text and to display it as valid HTML. To do so, we define a form:

>>> from zeam.form.ztk import Form, Fields
>>> class EditCave(Form):
...    grok.name('edit')
...    grok.context(ICave)
...    ignoreContent = False
...    fields = Fields(ICave)
>>> grok.testing.grok_component('edit', EditCave)
True

At this point, if we instanciate the form, we have a normal rendering:

>>> from zope.publisher.browser import TestRequest

>>> homecave = Grotto()
>>> request = TestRequest()

>>> form = EditCave(homecave, request)
>>> form.updateWidgets()

>>> print form.fieldWidgets.get('form.field.paintings').render()
<textarea id="form-field-paintings" name="form.field.paintings" class="field field-text field-required" cols="80" rows="5"></textarea>

To get the tinyMCE widget, you simply need to use the “mode” of the field, to indicate what you want to render:

>>> from dolmen.widget.tinymce import TINYMCE_INPUT

>>> form = EditCave(homecave, request)
>>> form.fields['paintings'].mode = TINYMCE_INPUT
>>> form.updateWidgets()

>>> print form.fieldWidgets.get('form.field.paintings').render()
<script type="text/javascript">
   $(document).ready(function(){
      $('textarea[name="form.field.paintings"]').tinymce();
   });
</script>
<textarea id="form-field-paintings"
          name="form.field.paintings"
          class="field field-text field-required"
          cols="80" rows="5"></textarea>

The modes can be ‘tinymce.input’ for an input widget and ‘tinymce.display’ to display the value as valid html:

>>> from dolmen.widget.tinymce import TINYMCE_DISPLAY
>>> homecave.paintings = u"<h1>Very nice paintings</h1><p>Mammoth</p>"

>>> form = EditCave(homecave, request)
>>> form.fields['paintings'].mode = TINYMCE_DISPLAY
>>> form.updateWidgets()

>>> print form.fieldWidgets.get('form.field.paintings').render()
<div id="form-field-paintings" name="form.field.paintings"
     class="field"><h1>Very nice paintings</h1><p>Mammoth</p></div>

Changelog

1.0b3 (2011-01-18)

  • Corrected entry points and inclusion path.

1.0b2 (2011-01-13)

  • Now we’re using fanstatic.

1.0b1 (2010-07-06)

  • Tuned the menus of the TinyMCE widget, in order to removed useless options.

  • The package is now using the latest changes in the zeam.form core, such as the ModeMarker, in order to get sane mode definitions.

1.0a1 (2010-06-06)

  • Initial release

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dolmen.widget.tinymce-1.0b3.tar.gz (5.5 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page