如何在Django前端模板中集成符合需求的富文本编辑器？

要实现这种带可视化格式编辑工具栏的富文本输入框，Django场景下可以通过集成django-ckeditor快速实现，操作步骤如下：

步骤1：安装依赖包 #

执行pip命令安装官方集成包：

pip install django-ckeditor

如果需要支持图片/文件上传功能，额外安装pillow：

pip install pillow

步骤2：配置项目设置 #

打开项目的settings.py，在INSTALLED_APPS中添加ckeditor相关应用：

INSTALLED_APPS = [
    # 你原有其他应用
    'ckeditor',
    'ckeditor_uploader', # 仅需要上传功能时添加
]

# 仅需要上传功能时添加以下配置
CKEDITOR_UPLOAD_PATH = 'uploads/' # 上传文件的存储路径
CKEDITOR_IMAGE_BACKEND = 'pillow'

# 自定义工具栏配置，可调整按钮和你需要的效果对齐
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full', # 显示全部工具栏按钮，也可以自定义数组指定要显示的按钮
        'height': 300, # 编辑器高度
        'width': '100%', # 编辑器宽度
    },
}

步骤3：表单/模型中使用编辑器 #

如果你通过Django表单渲染输入框，在forms.py中直接使用CKEditor提供的组件：

from django import forms
from ckeditor.widgets import CKEditorWidget
from .models import YourModel

class YourContentForm(forms.ModelForm):
    content = forms.CharField(widget=CKEditorWidget(), label='内容')
    class Meta:
        model = YourModel
        fields = '__all__'

步骤4：模板中渲染编辑器 #

在对应的Django模板中，正常渲染表单即可，需要额外引入编辑器的静态资源：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>富文本编辑器示例</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">提交</button>
    </form>
    <!-- 引入编辑器的静态资源，必须放在表单渲染之后 -->
    {{ form.media }}
</body>
</html>

如果不想修改后端配置，也可以自行下载纯前端富文本编辑器的静态资源放到项目static目录，在模板中引入后给普通<textarea>标签做初始化即可，和普通前端项目的集成逻辑完全一致。

内容的提问来源于stack exchange，提问作者sarangkkl