Building Your Own WYSIWYG Editor in Django: A Step-by-Step Guide

2 min readMar 24, 2023

Django is a popular web framework for building robust and scalable web applications. While it provides a lot of built-in functionality for forms and text input, there may be times when you want to create a more advanced user interface for text input. This is where a WYSIWYG (What You See Is What You Get) editor can be handy.

A WYSIWYG editor allows users to edit and format text visually, like a word processor, rather than writing HTML or markdown code. This can be especially useful for content creation, where users may not have technical skills or knowledge of HTML.

This article will show you how to build your own WYSIWYG editor in Django using the popular CKEditor library. We will walk you through the steps needed to integrate the editor into your Django application and show you how to customize it to fit your needs. Whether building a simple blog or a more complex web application, a WYSIWYG editor can be a valuable addition to your toolkit. How to Learn Django in 2023 as beginners to win Job

Here is a sample code that can help you get started:

Create a Django app

python manage.py startapp editor

Install Django CKEditor

pip install django-ckeditor

Add CKEditor to installed apps in settings.py

INSTALLED_APPS = [
    ...
    'ckeditor',
    'ckeditor_uploader',
    ...
]

Add CKEditor urls to urls.py

from django.urls import path, include
from ckeditor_uploader import views as ckeditor_views

urlpatterns = [
    ...
    path('ckeditor/', include('ckeditor_uploader.urls')),
    ...
]

Create a model with a TextField

from django.db import models

class MyModel(models.Model):
    content = models.TextField()

Add the CKEditor widget to the form field in forms.py

from django import forms
from ckeditor.widgets import CKEditorWidget
from .models import MyModel

class MyModelForm(forms.ModelForm):
    content = forms.CharField(widget=CKEditorWidget())

    class Meta:
        model = MyModel
        fields = ('content',)

Use the form in your views.py and templates

from django.shortcuts import render
from .forms import MyModelForm

def editor_view(request):
    form = MyModelForm(request.POST or None)
    if request.method == 'POST' and form.is_valid():
        form.save()
    return render(request, 'editor.html', {'form': form})

Create a template with the form and ckeditor javascript files

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Editor</title>
    {{ form.media }}
</head>
<body>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Save</button>
    </form>
</body>
</html>

That's it! You can now use this editor in your Django application.