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.

article/models.py

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:

'ckeditor_uploader',

Great, so when that is done. We can add the CKEditor to the main urls.py 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 settings.py file:

CKEDITOR_UPLOAD_PATH = 'uploads/'

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)

Video

Comments

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

Info

Please log in to comment!

Newsletter

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.