Tag: gui

Django wysiwyg Editor

Many Django projects require a wysiwyg editor. To cover this, there is an application for making Django textareas rich text editors: django-wysiwyg.

To use it, start by installing it through

pip install django-wysiwyg

.
Then, on your HTML template, include application:

{% load wysiwyg %}

As an example, take the following form:

#
# Event Edit From
#
class EventsDataForm(forms.Form):
    """
        Event data form
    """
    min_description_chars = 10
    max_description_chars = 2000

    ltitle = ugettext("Title")    
    ltitle_help = ugettext("The title of the event.")
    ltitle_required = ugettext("Please enter the title.")
   
    ldescription = ugettext("Description")
    ldescription_help = ugettext("Enter the event description.")
    ldescription_required = ugettext("Please describe the event.")    
    ldescription_min_length = ugettext('The minimum length is %s characters.')%(min_description_chars)
    ldescription_max_length = ugettext('The maximum length is %s characters of plain text (less characters for formated text)')%(max_description_chars)

    id = forms.IntegerField(widget=forms.HiddenInput(), required=False)
    title = forms.CharField(max_length=60, required=True, label=ltitle, help_text=ltitle_help, error_messages={'required': ltitle_required})
    long_description = forms.CharField(widget=forms.Textarea(attrs={'cols': 50, 'rows': 5}), min_length=min_description_chars, max_length=max_description_chars, required=True, label=ldescription, help_text=ldescription_help)

The “long_description” field is the field that will be wysiwyg editor.

Then, on your form, setup up the wysiwyg, draw the form and link it to your form field. Here’s an example:

{% block content %}
<form enctype="multipart/form-data" action='.' method='post'>
  {% csrf_token %}
  <table>  
    {% wysiwyg_setup %}
    {{ form.as_table }}
    {% wysiwyg_editor "id_long_description" %}
  </table>
  <input type="submit" value="Save" />
</form>
{% endblock %}

The

{% wysiwyg_setup %}

sets up the application.
The

{{ form.as_table }}

draws the form.
The

{% wysiwyg_editor "id_long_description" %}

links the form field “long_description” to the wysiwyg via the identifier.
Take special attention to the identifier, it’s the name of the field in the forms and it should be preceded by “id_”.

That is enough to make the “long_description” field a wysiwyg editor.

If one requires customization, for instance change the width or the toolbar buttons, one can do this by customizing the

django_wysiwyg_editor_config

variable. See the documentation for extra information about how to customize the component.
The trick is to perform the customization on the bottom of the page, just before closing the

</body>

tag.
First, load the “django_wysiwyg_editor_config” block, then load its code and, finally, apply your customization. Here’s and example:

<script>
{% block django_wysiwyg_editor_config %}
{{ block.super }}
django_wysiwyg_editor_config.width = "450px";
django_wysiwyg_editor_config.height = "200px";
{% endblock %}
</script>

And that’s it.