Django : Adding a WYSIWYG Editor

- 2 mins

This post is about adding a wysiwyg editor in django. It uses Trix, which is a WYSIWYG editor by Basecamp.

WYSIWYG stands for What you see is what you get. Wikipedia defines WYSIWYG as

A WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.

Lets take a Book model and corresponding BookForm which is used to add a new Book. The Book model looks like

# models.py

from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=255)
    description = models.TextField()

Here, we are considering that description is a rich text edit field, where we will use a wysiwyg editor to store information. BookForm will look like

# forms.py

from django import forms

class BookForm(forms.Form):
    title = forms.CharField()
    description = forms.CharField(widget=forms.HiddenInput())

Note that we have defined a HiddenInput widget for description field. This is because we are using Trix editor, which states that the field should be a hidden field with an id attribute.

Now lets consider, that we are using a simple view to render this form.

# views.py

from django.shortcuts import render

from .forms import BookForm


def create_book(request):
    template_name = 'book/create.html'
    form = BookForm(request.GET)
    # do further processing here

    return render(request, template_name, {'form': form})

To render Trix editor, we will need two files trix.css and trix.js. We are assuming that the necessary static file settings for a django project are in place and trix.css and trix.js are placed in a folder named trix under static files folder.

Lets define the template which will contain the form, where description field will be a rich text editor.

# book/create.html


{% load staticfiles %}
<html lang="en">
<head>
    <link href="{% static 'trix/trix.css' %}" rel="stylesheet">
    <script src="{% static 'trix/trix.js' %}"></script>
</head>

<body>
    <div style="width:50%; margin-left:10%; margin-top:20px;">
        <form action="" method="POST">
            {% csrf_token %}
            Title : {{form.title}}
            Description : {{form.description}}
            <trix-editor input="{{form.description.auto_id}}"></trix-editor>
        </form>
    </div>
</body>
</html>


We can see that for a rich text field (description here), we have defined a custom html tag trix-editor whose input attribute values is the id of description field. This way we have added a wysiwyg field in django. The value from this field can be processed in the same way as it is processed from any form field.

# views.py

def create_book(request):
    ....
    if request.method == 'POST':
        form = BookForm(request.POST)
        if form.is_valid():
            # usual way, in which other form fields are processed
            description = form.cleaned_data.get('description')

Summary

There are various other rich text editors in the market along with some comparisons. One very famous editor is TinyMCE which has a django app called django-tinymce. We opted for Trix, because it is minimalistic, easy to integrate and fits our use case.

Taranjeet Singh

Taranjeet Singh

Full Stack Developer, Entrepreneur

comments powered by Disqus
rss facebook twitter github youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora