How to use ckeditor in Django project with images and code snippet

CKEditor is a rich text editor that gives us a lot of options to customize our text. In this article, how will we use CKEditor with our project To use CKEditor in Django, you will need to install django-ckeditor and add it to your Django project.

Click here to know the features of CKEditor

Install the django-ckeditor package by running the following command:

pip install django-ckeditor

Add ckeditor to the INSTALLED_APPS list in your Django settings.py file:

INSTALLED_APPS = [
    "channels",
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "blogs_app",

    "ckeditor",  # new
    "ckeditor_uploader",  # new
]

Include the CKEditor URL patterns in your Django urls.py file:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

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

You have to create your own models in models.py:

from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField

class Blog(models.Model):
    title = models.CharField(max_length=300)
    content = RichTextUploadingField(null=True, blank=True)

    def __str__(self):
        return self.title

If you want to do it in frontend then you can create forms in forms.py:

from django import forms
from .models import Blog


class BlogForm(forms.ModelForm):
    class Meta:
        model = Blog
        fields = ['title', 'content']

Before rendering the CKEditor you have to give the media path in settings.py and make some changes to make it responsive

# media path
CKEDITOR_IMAGE_BACKEND = "pillow"
CKEDITOR_UPLOAD_PATH = "uploads/"

# for responsive & code snippet
CKEDITOR_CONFIGS = {
    "default": {
        "toolbar": None,
        "width": "100%",
        "extraPlugins": ",".join(
            [
                "codesnippet",
            ]
        ),
    },
}

Run the following command to apply the migrations:

python manage.py makemigrations

python manage.py migrate

You can then render the form in your template. Your view should be something like this:

from django.shortcuts import render
from .forms import BlogForm


def add_blog(request):
    if request.method == "POST":
        form = BlogForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
    form = BlogForm()
    return render(request, "forms.html", {"form": form})

Your forms.html template should be something like this:

{% include "base.html" %}
{% block forms %}
<form method="post" >
    {% csrf_token %}
    {{ form.media }}
    {{ form.as_p }}
    <input type="submit" value="Submit">
</form> 
{% endblock forms %}

You need to add this script tag in your base.html template for the code snippet

<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documents</title>
</head>
<body>
    {% block forms %}
      
    {% endblock forms %}
    {% block content %}
      
    {% endblock content %}
    {% block ckeditor %}

<link rel="stylesheet" href="{% static 'ckeditor/ckeditor/plugins/codesnippet/lib/highlight/styles/monokai.css' %}" />
<script src="{% static 'ckeditor/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js' %}"></script>

<script>hljs.initHighlightingOnLoad();</script>

{% endblock ckeditor %}
</body>
</html>

To show data your view should be like this:

from .models import Blog

def home(request):
    data = Blog.objects.all()
    return render(request, "blod_details.html", {"data": data})

As we already know, by default, Django escapes HTML because of security concerns. We can tell Django not to escape data by using safe the filter. Open blog_details.html in the blog directory and change dt.content to dt.content|safe.

{% include "base.html" %}
{% block content %}
  {% for dt in data %}
    <h1>{{dt.title}}</h1>
    <p>{{dt.content|safe}}</p> <br>
  {% endfor %}
{% endblock content %}

And your blog_app URLs should be something like this:

from django.urls import path
from . import views

urlpatterns = [
    path("", views.home, name="home"),
    path("add-blog/", views.add_blog, name="add-blog"),
]

You can see the screenshot here👇

I hope this helps! If you want to learn Django, we are bringing a course for that, you can see it by clicking here Django Beginner to Advanced course

Thanks For reading

Likes by: 1 Tags: django projects coding ckeditor

Author's profile

Abdulla Fajal

Django Developer

Information

Education

Graduation

Lives in

India

About

My name is Abdulla Fajal and I am the owner of "espere.in", if you want to give some suggestions, you can message me.

Action

Message

click here to see full profile

Espere.in