DEV Community

Cover image for How to use CkEditor in Django?
Madhuban Khatri
Madhuban Khatri

Posted on • Edited on

How to use CkEditor in Django?

Hello Everyone,
Do you need to know that how to use CkEditor in Django, what are the settings for CkEditor and how to use it in Templates also?

First of all, you have to install CkEditor

pip install django-ckeditor
Enter fullscreen mode Exit fullscreen mode

create a django project

django-admin startproject PROJECT_NAME
Enter fullscreen mode Exit fullscreen mode

create a app in Project

python manage.py startapp app1
Enter fullscreen mode Exit fullscreen mode

add app1 and ckeditor in settings.py INSTALLED APPS

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app1',
    'ckeditor',
]
Enter fullscreen mode Exit fullscreen mode

Now create Models in models.py. In this file, you have to import RichTextField using 'from ckeditor.fields import RichTextField' syntex.

from django.db import models
from ckeditor.fields import RichTextField

# Create your models here.
class User(models.Model):
    user_name = models.CharField(max_length=70)
    pwd = models.CharField(max_length=100)

    def __str__(self):
        return self.user_name



class Post(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField(max_length=100)
    content = RichTextField(blank=True,null=True)

    def __str__(self):
        return self.title

Enter fullscreen mode Exit fullscreen mode

Register Models in admin.py file

from django.contrib import admin
from .models import User, Post

# Register your models here.
@admin.register(User)
class UserAdmin(admin.ModelAdmin):
    list_display = ['id','user_name','pwd']



@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    list_display = ['id','user','title']
Enter fullscreen mode Exit fullscreen mode

create forms.py file in app1.

from django import forms
from .models import *
from ckeditor.fields import RichTextField


class PostForm(forms.ModelForm):
    userName = forms.CharField(widget=forms.TextInput(), required=True, max_length=100)
    title = forms.CharField(widget=forms.TextInput(),required=True, max_length=100)
    content = RichTextField()

    class Meta:
        model  = Post
        fields = ('userName','title','content',)


Enter fullscreen mode Exit fullscreen mode

create urls.py file in app1

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('add_post/', views.AddPostView.as_view(), name='add_post'),
    path('all_post/', views.SeePostView.as_view(), name='see_post'),
]
Enter fullscreen mode Exit fullscreen mode

include app1's urls.py file in project's urls.py, like this:-

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app1.urls'))
]
Enter fullscreen mode Exit fullscreen mode

Coding in views.py file

from django.shortcuts import render
from django.views.generic.list import ListView
from .models import User, Post
from .forms import PostForm
from django.http import HttpResponse
# Create your views here.

def home(request):
    return HttpResponse('<a href=add_post/>Add Post</a>')


class AddPostView(ListView):
    model = Post

    def get(self, request):
        form = PostForm()
        return render(request, 'app1/index.html', {'form':form})
    def post(self, request):
        form = PostForm(request.POST)
        if form.is_valid():
            userName = form.cleaned_data['userName']
            title = form.cleaned_data['title']
            content = form.cleaned_data['content']

            user_obj = User.objects.get(user_name=userName)
            add_post = Post.objects.create(user=user_obj, title=title, content=content)
            add_post.save()
            form = PostForm()
            return render(request,'app1/index.html',{'form':form})


class SeePostView(AddPostView):
    model = Post

    def get(self,request):
        all_post = self.model.objects.all().order_by('-id')
        return render(request, 'app1/all_post.html', {'posts':all_post})

Enter fullscreen mode Exit fullscreen mode

That's it.

If you face any problem than comment me.

Thank You.

Top comments (4)

Collapse
 
penrudee profile image
penrudee

How to upload​ image​ to aws s3 with ckeditor​.?

Collapse
 
aoulaa profile image
Olim Nizomov

did you find the solution ?

Collapse
 
aahnik profile image
Aahnik Daw

👍👍👍👍 great

Collapse
 
vmtb profile image
Marcos

Cool