Wagtail自带了两个编辑器:Draft editor 和Hallo editor(官方已不推荐),不过它也支持通过WAGTAILADMIN_RICH_TEXT_EDITORS的配置项来设置为其它的编辑器,自定义的编辑器必须是Django Widget的子类,它的构造函数需要接收一个options参数。
考虑到在我的产品需求里需要大量编辑公式、图表;draft editor的功能相对比较简单,它是wagtail自研的,社区支持相对也比较弱;而ckeditor是一个相当老牌的编辑器,扩展丰富功能强大,因此决定将wagtail的编辑器替换为ckeditor。
1、CKEditor功能介绍
CKEditor支持如下的功能特性:
1.1、终端用户特性
- 用户界面
- 设置用户界面颜色
- 设置用户界面语言
- 编辑器尺寸
- 设置尺寸
- 编辑器高度根据内容自动调整
- 自定义调整编辑器尺寸
- 上传图片
- 默认图片上传插件
- 加强的图片上传插件
- easy图片上传插件
- 插入内容
- 从word粘贴
- 从Google Docs粘贴
- 从excel粘贴
- 通过Spreadsheet插件创建数据表格
- 可以调整列宽的表格支持:table, table tools, table resize, table selection
- 嵌入媒体
- 插入代码:code snippets
- 插入数学和化学公式:MathType
- 插入数学公式:MathJax
- 使用占位符
- 拖动和粘贴
- 样式和格式化
- 基础样式
- 样式复制
- 对编辑内容应用样式
- 对块级内容应用样式
- 设置文本及背景言责
- 文档内容处理
- 校对,拼写和语法校验
- 将内容输出位PDF
- 自动填写
- emoji
- 源码编辑
- 易用性
- 易用性校验
- 键盘快捷键。
1.2、集成特性
- ToolBar的配置
- ToolBar的位置
- 浮动ToolBar
- 只读模式
- 通知
- 输出控制。
2、安装django-ckeditor,将其设为wagtail的默认编辑器
django-ckeditor插件可以将ckeditor集成进django内,提供了:RichTextField、RichTextUploadingField、CKEditorWidget、CKEditorUploadingWidget四种应用方式。
Step1. pip安装
pip3 install django-ckeditor
Step2. 将其配置进Installed APP内
#settings.py
INSTALLED_APPS = [
...
'ckeditor',
'ckeditor_uploader',
...
]
Step3. 运行静态文件收集:
python3 manage.py collectstatic
Step4. 配置上传路径:
CKEDITOR_UPLOAD_PATH = "editor/"
Step5. 设置为wagtail的默认编辑器
WAGTAILADMIN_RICH_TEXT_EDITORS = {
'default': {
'WIDGET': 'ckeditor_uploader.widgets.CKEditorUploadingWidget'
}
}
Step6. 前端页面的修改,配置代码高亮及mathjax
<!--代码高亮-->
<link href="/static/ckeditor/ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">
<script src="/static/ckeditor/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--mathjax数学公式渲染-->
<script type="text/javascript" id="MathJax-script" async
src="<https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js>">
</script>
参考文档:
django-ckeditor: https://github.com/django-ckeditor/django-ckeditor#installation
ckeditor: https://ckeditor.com/docs/index.html
wagtial editor documentation: https://docs.wagtail.org/en/stable/extending/rich_text_internals.html#editor-widgets