Django应用-4-修改wagtail的编辑器为CKEditor

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

MathJax: http://docs.mathjax.org/en/latest/web/start.html

Latex语法https://zh.wikipedia.org/wiki/Help:数学公式

Leave a comment

Your email address will not be published. Required fields are marked *