Django 富文本编辑器

富文本编辑器


[TOC]


概述

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

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

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

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

技术选型

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

  • ckeditor
  • ueditor
  • kindeditor
  • tinymce

在 Github 平台中,

最终技术选型为:

django-ckeditor

django-ckeditor

安装与配置

  1. 安装
pip install django-ckeditor
  1. 注册应用

在 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 属性。

高级用法

  1. 运行 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. 如果对已经定义,并且做过迁移的模型字段使用富文本编辑器,需要重新生成迁移文件,并重新迁移数据库。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容