Django Wysiwyg Tutorial | CKEditor

Django Wysiwyg Tutorial | CKEditor

/ #Django

Learn how to implement a simple wysiwyg editor with Django. In this video, I will show you how to do that.

I'm going to use CKEditor, but the procedure is almost the same for most of the wysiwyg editors out there.


from django.db import models

from ckeditor.fields import RichTextField

class Article(models.Model):
	title = models.CharField(max_length=255)
	content = RichTextField(blank=True, null=True)

CKEditor file uploader

In order to use the CKEditor file uploaded, we need to register it with Django. So first add this line to the list of INSTALLED_APPS:


Great, so when that is done. We can add the CKEditor to the main file:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
  path('ckeditor/', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Next, we need to tell CKEditor where the uploaded media files should be located. Add this line somewhere inside the file:


Great. Then we can add a new field to the article database model:

from ckeditor_uploader.fields import RichTextUploadingField

content_upload = RichTextUploadingField(blank=True, null=True)



Josh | Feb 11, 22 07:58

Hi Stein,

Is CKeEditor built in Django or we have to install via pip?

Stein Ove Helset | Feb 13, 22 07:53

Hi! It has to be installed using pip :-)

Add comment


Subscribe to my weekly newsletter. One time per week I will send you a short summary of the tutorials I have posted in the past week.