In this part let's use part of CRUD, only create and read to bring Ckeditor to the frontend.
We use CreateArticle view to create new articles using Ckeditor in the frontend and ReadArticle sends the articles to the templates where we will display them with all the styles from Ckeditor.
from django.views.generic import ListView
from django.views.generic.edit import CreateView
from .models import Article
class CreateArticle(CreateView):
model = Article
fields = ['content']
success_url = "/"
class ReadArticle(ListView):
model = Article
context_object_name = "articles"
from django.urls import path
from .views import *
urlpatterns = [
path('', ReadArticle.as_view(), name="read_article"),
path('create/', CreateArticle.as_view(), name="create_article"),
]
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/45.0.0/ckeditor5.css" />
</head>
<body>
<div class="container">
<form method="post">
{% csrf_token %}
{{ form.media }}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/45.0.0/ckeditor5.css" />
</head>
<body>
<div class="container ck-content">
{% for article in articles %}
{{article.content|safe}} <hr>
{% endfor %}
<a href="{% url 'create_article' %}">Create Article</a>
</div>
</body>
</html>
Tested with: django==4.2 django-ckeditor-5==0.2.13
12 Feb. 2024
|
Last Updated: 03 Dec. 2025
|
jaimedcsilva Related
