Django使用django-ckeditor富文本编辑器

在django项目中可以使用django-ckeditor富文本编辑器

安装django-ckeditor

pip install django-ckeditor

安装Pillow

Pillow是python的一个图像处理库，django-ckeditor需要依赖该库。最简单的安装方法，当然是使用pip，假设你装过pip，可以直接运行以下命令安装：

pip install pillow

配置django项目

要使安装好的django-ckeditor生效，你需要对你的django应用进行一系列配置。

1、在你的settings.py文件中，将ckeditor、ckeditor_uploader添加到INATALLED_APPS中。

INSTALLED_APPS = [
    # 'suit',
    'simpleui',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'content.apps.ContentConfig',
    'teacher.apps.TeacherConfig',
    'ckeditor',
    'ckeditor_uploader',
]

2、在你的settings.py文件中，添加CKEDITOR_UPLOAD_PATH配置项。例如，我的是：

MEDIA_URL = '/uploads/'  # 上传图片的路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')  # 上传图片的根路径
CKEDITOR_UPLOAD_PATH = 'ckeditor_img' # 编辑器上传图片路径

CHEDITOR_UPLOAD_PATH的作用是设定你通过ckeditor所上传的文件的存放目录。需要注意的是，这是一个相对路径，它相对与你设置的的MEDIA_ROOT。django-ckeditor默认使用django的后台文件存储系统，这需要你设置好MEDIA_ROOT和MEDIA_URL，如何设置超出了本文的范围，请自行查看django的官方文档，请务必确保这两个设置项是生效的，否则你将看不到你上传的文件。
需要指出的是：在开发阶段，这样设置settings.py已经足够了。但是，到了正式部署你的应用时，你需要设置好STATIC_ROOT和STATIC_URL，并运行manage.py collectstatic命令，该命令会将ckeditor相关的静态资源拷贝到你的工程下。
3.在urls.py中增加ck的url配置：

re_path('uploads/(?P<path>.*)', serve, {"document_root": MEDIA_ROOT}),
path('ckeditor/', include('ckeditor_uploader.urls')),

使用ckeditor

1，在modes.py中导入下面两个包
第一个只有一个富文本编辑器，无图片文件上传，第二个具有图片文件上传功能。

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField

2，在modes.py模型中使用

content = RichTextUploadingField(verbose_name=u'文章内容')

3，在setting.py文件中配置

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',  # 工具条功能
        'height': 300,  # 编辑器高度
        'width': 800,  # 编辑器宽
        'toolbar_Custom':[
            ['Source','Bold', 'Italic', 'Underline', 'Blockquote','Format','Font','FontSize'],
            ['TextColor','BGColor','Image','Smiley' ,'Link', 'Unlink','PasteFromWord'],
            ['JustifyCenter','JustifyRight','JustifyBlock']
        ]
    },
}

可以根据需求自己配置编辑器工具栏：

工具栏名称参考：
Source = 源码模式
Save = 保存(提交表单)
NewPage = 新建
Preview = 预览
Templates = 模板
Cut = 剪切
Copy = 复制
Paste = 粘贴
PasteText = 粘贴为无格式文本
PasteFromWord = 从 MS WORD 粘贴
Print = 打印
SpellChecker = 拼写检查
Scayt = 即时拼写检查
Undo = 撤销
Redo = 重做
Find = 查找
Replace = 替换
SelectAll = 全选
RemoveFormat = 清除格式
Form = 表单
Checkbox = 复选框
Radio = 单选框
TextField = 单行文本
Textarea = 多行文本
Select = 列表/菜单
Button = 按钮
ImageButton = 图片按钮
HiddenField = 隐藏域
Bold = 加粗
Italic = 倾斜
Underline = 下划线
Strike = 删除线
Subscript = 下标
Superscript = 上标
NumberedList = 编号列表
BulletedList = 项目列表
Outdent = 减少缩进量
Indent = 增加缩进量
Blockquote = 块引用
CreateDiv = 创建DIV容器
JustifyLeft = 左对齐
JustifyCenter = 居中
JustifyRight = 右对齐
JustifyBlock = 两端对齐
BidiLtr = 文字方向从左到右
BidiRtl = 文字方向从右到左
Link = 插入/编辑超链接(上传文件)
Unlink = 取消超链接
Anchor = 插入/编辑锚点链接
Image = 图像(上传)
Flash = 动画(上传)
Table = 表格
HorizontalRule = 插入水平线
Smiley = 插入表情
SpecialChar = 插入特殊符号
PageBreak = 插入分页符
Styles = 样式快捷方式
Format = 文本格式
Font = 字体
FontSize = 文字大小
TextColor = 文字颜色
BGColor = 背景颜色
Maximize = 全屏编辑模式
ShowBlocks = 显示区块
About = 显示关于

这样在django admin后台管理中一个完美的编辑器就出现了，

前端显示ckeditor输入的内容

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

<script src="ckeditor/ckeditor/ckeditor.js"></script>

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