在django中配置富文本编辑器（转）

目录

第一步 安装富文本编辑器

第二步 注册富文本编辑器

第三步 设置模型

第四步 数据库迁移

配置富文本编辑器

在前端中展示使用到富文本编辑器的数据

在管理员页面之外中使用富文本编辑器

---

第一步 安装富文本编辑器

pip install django-ckeditor

第二步 注册富文本编辑器

在settings.py文件中的INSTALLED_APPS中进行添加ckeditor。

INSTALLED_APPS = [
    ......
    'ckeditor',  # 富文本编辑器
    ......
]

第三步 设置模型

在需要使用富文本编辑器的字段中，使用django-ckeditor库自己的富文本字段RichTextField

from ckeditor.fields import RichTextField

class Tie_zi(models.Model):
    data = RichTextField()

第四步 数据库迁移

命令与平时一样，这里就不再写了

配置富文本编辑器

默认情况下，直接使用富文本编辑器是带有全部功能的，我们也可以根据需求对富文本编辑器的功能进行自定义的操作。

ckeditor允许你在settings.py中进行自定义配置：

CKEDITOR_CONFIGS = {
    # django-ckeditor默认使用default配置
    'default': {
        # 编辑器宽度自适应
        'width':'auto',
        'height':'250px',
        # tab键转换空格数
        'tabSpaces': 4,
        # 工具栏风格
        'toolbar': 'Custom',
        # 工具栏按钮
        'toolbar_Custom': [
            # 表情 代码块
            ['Smiley', 'CodeSnippet'], 
            # 字体风格
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            # 字体颜色
            ['TextColor', 'BGColor'],
            # 链接
            ['Link', 'Unlink'],
            # 列表
            ['NumberedList', 'BulletedList'],
            # 最大化
            ['Maximize']
        ],
        # 加入代码块插件
        'extraPlugins': ','.join(['codesnippet']),
    }
}

一般情况下使用默认即可，如果有特殊需求，也可以查看下面官方文档链接

Django CKEditor — Django CKEditor 5.3.1 文档 (django-ckeditor.readthedocs.io)https://django-ckeditor.readthedocs.io/en/latest/#plugins

在前端中展示使用到富文本编辑器的数据

与普通的数据展示方法一样，使用模板语法插入字段名即可。值得注意的是，富文本是以类似HTML的方式进行存储的，使用在使用后还需要加上safe过滤器进行转义即可正常输出

在管理员页面之外中使用富文本编辑器

在管理面板外部呈现表单时，必须确保所有表单媒体都存在，以便编辑器正常工作。实现这一目标的一种方法是这样的：

<form>
    {{ myform.media }}
    {{ myform.as_p }}
    <input type="submit"/>
</form>

 模板中myform表示的是使用django中的表单系统所生成的实例。写上这两个模板后会自动生成表单实例中的表单数据，其中使用到富文本编辑器的字段名则会使用富文本编辑器进行编辑。

或者，你也可以手动加载媒体，如下：

{% load static %}
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

这两个js文件安装django-ckeditor会存在，按照上面的路径导入即可。但是这种方法不能自动生成表单，还是需要在HTML中一个个的使用模板语法插入表单实例。