Adding a WYSIWYG Editor to your Django app.

One of the most useful features of Django is it’s admin interface. But the standard plain textarea is really hard to handle. So my first technical blog post will deal with adding a rich HTML editor to an existing django app.

Some of the common django based WYSIWYG editor apps are listed below.

  1. django-ckeditor
  2. django-summernote
  3. django-tinymce
  4. django-wysiwyg
  5. django-wysiwyg-redactor

In this post I will install and configure django-ckeditor.

Step 1: Install django-ckeditor app using pip.

pip install django-ckeditor

Step 2: Add ckeditor to INSTALLED_APPS in file.

Step 3: Add the following lines to your settings file.


Step 4: Update your project’s file with the below line.

url(r'^ckeditor/', include('ckeditor.urls')),

Step 5: Modify your file and change your model fields.

from ckeditor.fields import RichTextField
class BlogPost(models.Model):
    author = models.CharFIeld(max_length=30)
    title = models.CharField(max_length=50)
    description = RichTextField()

    def __unicode__(self):
        return self.title

Step 6: Now run the following django commands.

python makemigrations
python migrate
python collectstatic
python runserver

Done. Now open up your browser and go to the link Log in to the admin account using your superuser name and password.

Finally try to create a new post using the newly added WYSIWYG editor.