Django 富文本编辑器

django-ckeditor 是一个为 Django 框架集成 CKEditor 富文本编辑器的第三方库，能够在 Django 的后台管理界面或者前端界面提供一个图形化的富文本编辑器来输入内容。

1.安装&配置

• 安装 django-ckeditor 到 Python 环境中。

  pip install django-ckeditor

• 修改 settings.py 文件，添加 ckeditor 的基本配置。

  INSTALLED_APPS = [
      ...
      'ckeditor',
      'ckeditor_uploader',  # 如果使用上传功能
  ]
  
  # 上传文件保存路径
  MEDIA_URL = "/media/"
  MEDIA_ROOT = os.path.join(BASE_DIR, "media/")
  
  # CKEditor 上传路径
  CKEDITOR_UPLOAD_PATH = "uploads/"
  
  # 可选：配置 toolbar
  CKEDITOR_CONFIGS = {
      'default': {
          'toolbar': 'full',
          'height': 300,
          'width': '100%',
      },
  }

2.模型中使用 django-ckeditor

django-ckeditor 提供了 RichTextField(无上传功能的富文本字段)、RichTextUploadingField(带上传功能的富文本字段)、CKEditorWidget(无上传功能的表单控件) 、CKEditorUploadingWidget(带上传功能的表单控件) 四个字段，导入方式如下所示：

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField
from ckeditor.widgets import CKEditorWidget
from ckeditor_uploader.widgets import CKEditorUploadingWidget

这里先使用 RichTextField 字段进行测试，修改文章模型的 body 字段类型，如下所示：

from ckeditor.fields import RichTextField

# 博客文章数据模型
class ArticlePost(models.Model):
    ...
    # 设置富文本(无上传功能)
    body = RichTextField()

这里是文章模型的修改，因此要注意进行数据库的迁移操作。

# 生成数据库迁移文件
python manager.py mkamigrations
# 执行数据库迁移操作
python manager.py migrate

修改文章的表单文件，代码如下所示：

from ckeditor.widgets import CKEditorWidget

# 写文章的表单类
class ArticlePostForm(forms.ModelForm):
    class Meta:
		# 添加django-ckeditor要绑定的字段信息
        widgets = {
            'body': CKEditorWidget(),  # 用 CKEditor 替代原 textarea
        }

修改模版文件，导入 django-ckeditor 的前端控件，重点是其中的 {{ article_post_form.media }} 会加载 django-ckeditor 的 javascript 和 css 文件。

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-12 col-md-10 col-lg-8">
            <form method="post" action="." class="my-4">
                {% csrf_token %}
                {{ article_post_form.media }} 
                {{ article_post_form.as_p }}  
                <button type="submit" class="btn btn-primary">文章发表</button>
            </form>
        </div>
    </div>
</div>
{% endblock content %}

修改完成后，再次运行 django 工程，实现效果如下图所示

3.django-ckeditor 自定义配置

CKEDITOR_CONFIGS 配置说明文档：https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

这里提供一个常用的 django-ckeditor 自定义配置

CKEDITOR_CONFIGS = {
    'default': {
        # 'toolbar': 'full',
        'height': 300,
        # 宽度
        'width': 'auto',
        # 工具栏风格
        'toolbar': 'Custom',
        #
        'toolbar_Custom': [
            # 表情 代码块
            ['Smiley', 'CodeSnippet'],
            # 字体风格
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            # 字体颜色
            ['TextColor', 'BGColor'],
            # 链接
            ['Link', 'Unlink'],
            # 列表
            ['NumberedList', 'BulletedList'],
            # 最大化
            ['Maximize'],
            # 源代码
            ['Source'],
            # 图片
            ['Image'],
            # 表格
            ['Table'],
            # 对齐方式
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            # 字体
            ['Font', 'FontSize'],
            # 撤销 重做
            ['Undo', 'Redo'],
            # 全屏
            ['ShowBlocks'],
            # 目录
            ['Format'],
        ],
        # 代码块插件
        'extraPlugins': ','.join(['codesnippet','image2','filebrowser','widget', 'lineutils', 'uploadimage']),
        'filebrowserUploadUrl': '/custom_upload/',
        'filebrowserBrowseUrl': '/custom_browse/',
    },
}