How to Integrate CKEditor in Django: Step-by-Step Guide for Beginners
CKEditor is a popular WYSIWYG (What You See Is What You Get) editor for content editing. Integrating CKEditor into a Django project makes it easy to manage rich text in forms and the admin interface. In this tutorial, we’ll learn how to integrate CKEditor with file upload capabilities into a Django project, step by step.
We’ll create a Django project named editor and an app called main_app. This tutorial is beginner-friendly, so if you are new to Django or CKEditor, follow along, and you'll have it up and running in no time.
Prerequisites
- Basic knowledge of Python and Django.
- Python installed on your system.
- Django installed (
pip install django). - CKEditor package for Django (
pip install django-ckeditor).
Step 1: Create a Django Project and App
- First, create a new Django project called
editor:
django-admin startproject editor2. Now, create an app called main_app:
cd editor
python manage.py startapp main_appStep 2: Install and Configure CKEditor
Install CKEditor by running the following command:
pip install django-ckeditorNext, add ckeditor and ckeditor_uploader to the INSTALLED_APPS in editor/settings.py:
INSTALLED_APPS = [
# Other apps
'main_app',
'ckeditor',
'ckeditor_uploader',
]We’ll also configure media files, which CKEditor will need for uploads. Add the following to the settings.py file:
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Static and Media files
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# CKEditor Configuration
CKEDITOR_UPLOAD_PATH = "uploads/ck_editor/"
CKEDITOR_RESTRICT_BY_USER = False
CKEDITOR_REQUIRE_STAFF = False
CKEDITOR_ALLOW_NONIMAGE_FILES = False
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full',
'uploadUrl': '/ckeditor/upload/',
'filebrowserUploadUrl': '/ckeditor/upload/',
'imageUploadUrl': '/ckeditor/upload/',
'startupFocus': True,
'height': 300,
'width': "100%",
},
}Step 3: Create Models and Forms
Now, let’s create a model for blog posts where CKEditor will be used to manage the content. In main_app/models.py, define the BlogPost model:
from django.db import models
class BlogPost(models.Model):
title = models.CharField(max_length=255)
content = models.TextField() # Simple TextField for the content
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.titleNext, create a form to allow users to create blog posts with CKEditor. In main_app/forms.py, create a form using CKEditor’s widget:
from django import forms
from .models import BlogPost
from ckeditor_uploader.widgets import CKEditorUploadingWidget
class BlogPostForm(forms.ModelForm):
content = forms.CharField(widget=CKEditorUploadingWidget())
class Meta:
model = BlogPost
fields = ['title', 'content']Step 4: Create Views and Templates
Now, let’s create a view that will handle blog post creation. In main_app/views.py, define the create_blog_post view:
from django.shortcuts import render, redirect
from .forms import BlogPostForm
def create_blog_post(request):
if request.method == 'POST':
form = BlogPostForm(request.POST)
if form.is_valid():
form.save()
return redirect('blog_post_success') # Redirect to success page after saving
else:
form = BlogPostForm()
return render(request, 'create_blog_post.html', {'form': form})Next, create the template create_blog_post.html in main_app/templates:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Blog Post</title>
</head>
<body>
<h1>Create Blog Post</h1>
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Save Post</button>
</form>
</body>
</html>Step 5: Set Up URLs
Now, let’s configure the URLs. In editor/urls.py, include the CKEditor URLs and point to your app’s urls.py:
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include
from django.contrib import admin
urlpatterns = [
path('', include('main_app.urls')), # Main app URLs
path('admin/', admin.site.urls),
path('ckeditor/', include('ckeditor_uploader.urls')), # CKEditor URLs
]
# Serve media files in development
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)Then, in main_app/urls.py, define a URL for creating blog posts:
from django.urls import path
from main_app.views import create_blog_post
urlpatterns = [
path('create/', create_blog_post, name='create_blog_post'),
]Step 6: Register Models in Admin
In main_app/admin.py, register the BlogPost model with CKEditor integration for the admin interface:
from django.contrib import admin
from .models import BlogPost
from ckeditor_uploader.widgets import CKEditorUploadingWidget
from django import forms
class BlogPostAdminForm(forms.ModelForm):
content = forms.CharField(widget=CKEditorUploadingWidget())
class Meta:
model = BlogPost
fields = '__all__'
class BlogPostAdmin(admin.ModelAdmin):
form = BlogPostAdminForm
admin.site.register(BlogPost, BlogPostAdmin)Step 7: Migrate the Database and Collect Static Files
After setting everything up, run the following commands to apply migrations and collect static files:
python manage.py makemigrations
python manage.py migrate
python manage.py collectstaticStep 8: Run the Server
Finally, run the development server to see CKEditor in action:
python manage.py runserverVisit http://127.0.0.1:8000/create/ to create a blog post with CKEditor!
Conclusion
In this tutorial, we learned how to integrate CKEditor into a Django project, including setting up file uploads. You can now use CKEditor in your forms to create rich text content with ease. Whether you’re a beginner or an experienced developer, CKEditor adds powerful functionality to your Django applications.
Github link :- https://github.com/manishankarjaiswal/ckeditor.git
Happy coding!
