富文本编辑器
[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
安装与配置
- 安装
pip install django-ckeditor
- 注册应用
在 setting.py 中,
THIRD_PARTY_APPS = [
...
'ckeditor',
]
以上 2 步即可完成 django-ckeditor 的安装和配置,并在模型中使用 django-ckeditor。
使用
在模型中使用 django-ckeditor 需要 2 步:
- 引入 django-ckeditor 的 RichTextField 字段
- 在定义字段时使用 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 属性。
高级用法
- 运行
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'
常见问题
- 如果对已经定义,并且做过迁移的模型字段使用富文本编辑器,需要重新生成迁移文件,并重新迁移数据库。