Django 富文本编辑器

富文本编辑器

---

[TOC]

---

概述

Django 官方并没有集成富文本编辑器。而富文本编辑器是内容型系统后台管理中不可缺少的控件。

在django模型中将某个字段类型设置为 TextFiled()，将该模型加入 Django admin 后台管理时，只会呈现普通文本框。而在实际需求中，使用 TextFiled() 类型的字段在编辑详情时需要进行格式的编辑、上传图片、排版、修改文字颜色，这些普通的 TextField 都是不能实现的。

django-admin中添加富文本编辑器的几种方式

• 使用第三方库，如django-ckeditor
• 在admin中定义富文本编辑器的widget
• 通过定义ModelAdmin的媒体文件

技术选型

比较常见的富文本编辑器有：

• ckeditor
• ueditor
• kindeditor
• tinymce

在 Github 平台中，

• DjangoUeditor（422星） [Github 项目地址]
  这个项目在2016年1月15日已经停更了。作者在自述文件中也明确说明了停止更新。

• django-tinymce（843星）[Github 项目地址]

• django-ckeditor（1600+星）[Github 项目地址]

最终技术选型为：

django-ckeditor

django-ckeditor

安装与配置

1. 安装

pip install django-ckeditor

2. 注册应用

在 setting.py 中，

THIRD_PARTY_APPS = [
    ...
    'ckeditor',
]

以上 2 步即可完成 django-ckeditor 的安装和配置，并在模型中使用 django-ckeditor。

使用

在模型中使用 django-ckeditor 需要 2 步：

1. 引入 django-ckeditor 的 RichTextField 字段
2. 在定义字段时使用 RichTextField 类型

如下例：

from django.db import models
from ckeditor.fields import RichTextField   # 引入 RichTextField 字段

class Apps(models.Model):
    app_depict = RichTextField(verbose_name="应用描述", help_text="这个应用的详细描述，可以使用带格式的文本")

django-ckeditor 仍然支持 Django 模型定义的 verbose_name 和 help_text 属性。

高级用法

3. 运行 collectstatic 管理命令
   将静态 CKEditor 所需的媒体资源复制到 STATIC_ROOT 设置指定的目录中。

指定 jQuery 路径

由于djang-ckeditor在ckeditor-init.js文件中使用了JQuery，所以要在 settings.py中设置 CKEDITOR_JQUERY_URL 来指定 jQuery 库的路径，例如:

CKEDITOR_JQUERY_URL ='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'

常见问题

1. 如果对已经定义，并且做过迁移的模型字段使用富文本编辑器，需要重新生成迁移文件，并重新迁移数据库。