I’ve been working with Python, and one thing I’ve learned is the importance of providing a seamless content editing experience for users. When building web applications or any form of content management.
CKEditor is one of the most popular and reliable rich text editors out there. It offers a user-friendly interface, extensive customization options, and works perfectly with Django. In this tutorial, I’ll walk you through how to integrate CKEditor into your Django project with clear, practical examples.
Let’s get in!
Methods to Use CKEditor in Django?
By default, Django’s admin text fields are plain text areas, which can be limiting for content creators. CKEditor transforms these fields into rich text editors, allowing users to format text, insert images, and much more, all without needing to know HTML.
From my experience working with USA-based clients, integrating CKEditor has significantly improved the content editing workflow, especially for marketing teams and content managers who prefer a WYSIWYG interface.
Check out Build a Contact Form in Django using Bootstrap
Method 1: Integrate CKEditor Using the django-ckeditor Package
This is the most straightforward and popular method to add CKEditor to your Django project.
Step 1: Install the Package
Run the following command to install the django-ckeditor package:
pip install django-ckeditorStep 2: Configure Your Django Project
Open your settings.py and add 'ckeditor' to your INSTALLED_APPS:
INSTALLED_APPS = [
# other apps
'ckeditor',
]Add media settings to serve CKEditor files:
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'Step 3: Update URLs
In your project’s main urls.py, add the following to serve media files and CKEditor URLs:
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include
urlpatterns = [
# other url patterns
path('ckeditor/', include('ckeditor_uploader.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)Step 4: Create a Model with CKEditor Field
Here’s an example model for a blog post with a rich text content field:
from django.db import models
from ckeditor.fields import RichTextField
class BlogPost(models.Model):
title = models.CharField(max_length=200)
content = RichTextField()
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.titleStep 5: Apply Migrations
Run migrations to create the table for your model:
python manage.py makemigrations
python manage.py migrateStep 6: Use CKEditor in Django Admin
Register your model in admin.py:
from django.contrib import admin
from .models import BlogPost
@admin.register(BlogPost)
class BlogPostAdmin(admin.ModelAdmin):
list_display = ('title', 'created_at')You can refer to the screenshot below to see the output.
Now, when you add or edit a blog post in the Django admin, the content field will be a rich text editor powered by CKEditor.
Read Create a Form with Django Crispy Forms
Method 2: Integrate CKEditor with File Upload Support
Sometimes, you want users to upload images or files directly through the editor. django-ckeditor supports this with an uploader.
Step 1: Install the Package (if not done already)
pip install django-ckeditorStep 2: Add 'ckeditor_uploader' to INSTALLED_APPS
INSTALLED_APPS = [
# other apps
'ckeditor',
'ckeditor_uploader',
]Step 3: Update CKEditor Config in settings.py
Add the following configuration to enable uploads:
CKEDITOR_UPLOAD_PATH = "uploads/"Step 4: Update URLs to Include Uploader
from django.urls import path, include
urlpatterns = [
# other url patterns
path('ckeditor/', include('ckeditor_uploader.urls')),
]Step 5: Modify Your Model
Use the uploader-enabled field:
from ckeditor_uploader.fields import RichTextUploadingField
class BlogPost(models.Model):
title = models.CharField(max_length=200)
content = RichTextUploadingField()
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.titleStep 6: Migrate and Test
Run migrations and start your server:
python manage.py makemigrations
python manage.py migrate
python manage.py runserverNow, in the admin, users can upload images directly to the content.
You can refer to the screenshot below to see the output.
Check out Create a Contact Form with Django and SQLite
Method 3: Use CKEditor in Django Forms
If you want to use CKEditor outside the admin, for example, in a user-facing form, you can do that easily.
Step 1: Create a Form with CKEditor Widget
from django import forms
from ckeditor.widgets import CKEditorWidget
from .models import BlogPost
class BlogPostForm(forms.ModelForm):
content = forms.CharField(widget=CKEditorWidget())
class Meta:
model = BlogPost
fields = ['title', 'content']Step 2: Use the Form in Views
from django.shortcuts import render, redirect
from .forms import BlogPostForm
def create_post(request):
if request.method == "POST":
form = BlogPostForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return redirect('post_list')
else:
form = BlogPostForm()
return render(request, 'create_post.html', {'form': form})Step 3: Create Template
<!-- templates/create_post.html -->
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>You can refer to the screenshot below to see the output.
This way, CKEditor is fully functional in your Django forms, providing a rich text editing experience to users.
Read Add Google reCAPTCHA to Django Form
Tips from My Experience
- Always configure the media URL and root properly to serve uploaded files.
- Use the uploader if your users need to add images or files inside the editor.
- Customize the CKEditor toolbar if you want to simplify or extend the editor features.
- Make sure to test on different browsers to ensure compatibility.
- For production, serve media files through a dedicated service or CDN for better performance.
Integrating CKEditor in Django is straightforward and adds tremendous value to your web applications. Whether you’re building a blog, CMS, or any app that requires rich text input, CKEditor is a reliable and flexible choice.
If you follow the steps above, you’ll have a useful editor up and running in no time, just like I have done many times with my clients.
You may like to read:
- Run Python Script in Django
- How to Use Python Django pre_save
- Build a Django Contact Form with Email
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
