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 }}。