Django Web Framework Tutorials

How to Integrate CKEditor Rich Text Field in Django Website

by Categories Django Tutorial

CKEditor is a popular WYSIWYG (What You See Is What You Get) rich text editor that enables users to create and edit content with ease. Integrating CKEditor into your Django website allows you to provide a user-friendly content editing experience. In this blog post, we will walk you through the process of integrating CKEditor into your Django application and demonstrate it with an example.

Prerequisites

Before we get started, ensure you have the following prerequisites:

  1. Django Installed: Make sure you have Django installed in your Python environment. You can install it using pip:
pip install Django
  1. Django Project: Set up a Django project with the necessary models, views, and templates.

Integration Steps

Let’s integrate CKEditor into your Django website step by step:

Step 1: Install CKEditor

First, you need to install CKEditor using pip:

pip install django-ckeditor

Step 2: Add CKEditor to INSTALLED_APPS

In your Django project’s settings (settings.py), add 'ckeditor' to the INSTALLED_APPS list:

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

Step 3: Configure CKEditor

In settings.py, configure CKEditor by specifying a CKEditor configuration file (e.g., ckeditor/config.js). You can also customize CKEditor settings directly in this configuration file.

CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline', 'RemoveFormat'],
            ['NumberedList', 'BulletedList', 'Blockquote'],
            ['Link', 'Unlink', 'Image', 'Table'],
        ],
        'height': 300,
        'width': 800,
    },
}

This configuration sets up the CKEditor toolbar and defines the size of the editor window.

Step 4: Add TinyMCE to Your Forms

To use CKEditor in your forms, you’ll need to update the form class. Import CKEditorWidget from ckeditor.widgets, and then use it as a widget for your rich text fields.

from django import forms
from ckeditor.widgets import CKEditorWidget

class MyForm(forms.Form):
    content = forms.CharField(widget=CKEditorWidget())

In this example, we’ve integrated CKEditor with the content field of a model form.

Here is Sample View

from django.shortcuts import render
from .forms import MyForm

def index(request):
    form = MyForm()
    return render(request, 'index.html', {'form': form})

Step 5: Add CKEditor Media Files

In your HTML templates where you want to use CKEditor, include CKEditor media files.  Make sure that you include {{ form.media }}

<!-- template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Django App</title>
    {% load static %}
</head>
<body>
    <!-- Your CKEditor-enabled form field -->
    <form method="post">
        {% csrf_token %}
        {{ form.media }}
        {{ form.as_p }}
        <button type="submit">Submit</button>
    </form>
    <script>
        CKEDITOR.replace('id_content');  // Replace 'id_content' with the actual field ID
    </script>
</body>
</html>

Replace 'id_content' with the actual ID of your CKEditor field in the form.

Step 6: Run the Development Server

Start your Django development server:

python manage.py runserver

Access the form that uses CKEditor in your browser. You’ll see the CKEditor rich text editor integrated, allowing users to create and format content with ease.

Conclusion

Integrating CKEditor into your Django website enhances the content creation experience for your users. Whether you’re building a blog, a content management system, or any other content-heavy application, CKEditor provides a robust and user-friendly editing interface. By following the steps outlined in this blog post, you can seamlessly integrate CKEditor into your Django project and empower your users to create and edit rich content effortlessly.

Find this project on Github.

More on CKEditor

Read our blog project build using ckeditor

Blogs You Might Like to Read!