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:
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
sets up the application.
The
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
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.
