django-ckeditor

前言

django是一个容易快速上手的web框架，用它来创建内容驱动型的网站（比如独立博客）十分方便。遗憾的是，django并没有提供官方的富文本编辑器，而后者恰好是内容型网站后台管理中不可或缺的控件。ckeditor是一款基于javascript，使用非常广泛的开源网页编辑器。它可以和多种编程语言相结合，python当然也不例外。本文就来介绍一下如何在基于django博客系统如何完美地用上ckeditor。

使用方法

pip3 install django-ckeditor

settings注册应用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'ckeditor',
]

model.py

from ckeditor.fields import RichTextField


class Comment(models.Model):
    author = models.CharField(max_length=50, verbose_name='评论者')
    # 之前为 content = models.TextField()
    content = RichTextField()

    def __str__(self):
        return self.author

记得每次修改模型后要迁移数据

python3 manage.py makemigrations
python3 manage.py migrate

然后就可以用了，如果需要插入图片，则需要安装一个 pillow包

pip3 install pillow

注册应用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'ckeditor',
    'ckeditor_uploader',

]

配置 media 和 ckeditor

# media

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# 配置ckeditor
CKEDITOR_UPLOAD_PATH = 'upload/'

配置URL

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



urlpatterns = [

    # ckeditor路由
    path('ckeditor', include('ckeditor_uploader.urls')),
    path('admin/', admin.site.urls),
    path('hh', Index.as_view()),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

改写model类 字段

from ckeditor_uploader.fields import RichTextUploadingField


class Comment(models.Model):
    author = models.CharField(max_length=50, verbose_name='评论者')
    content = RichTextUploadingField(null=True)

    def __str__(self):
        return self.author

完成！

如何在前端显示ck输入的内容
前端要显示ck输入的内容时，在需要使用的页面头部引入：

<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

光这样你会发现，显示出来的时候是原始的包含各种html标签等符号的内容，此时在变量中增加safe过滤即可，如：{{ content | safe }}。