Django集成富文本编辑器summernote的实现步骤

下面我来详细讲解一下“Django集成富文本编辑器summernote的实现步骤”的完整攻略。

1. 安装依赖

首先需要安装一个 Python 拓展包 django-summernote：

pip install django-summernote

2. 配置 Django

在项目目录下的 settings.py 文件中添加以下内容：

INSTALLED_APPS = [
    # ...
    'django_summernote',
    # ...
]

X_FRAME_OPTIONS = 'SAMEORIGIN'

SUMMERNOTE_CONFIG = {
    'width': '100%',
    'height': '300',
    'toolbar': [
        ['style', ['style']],
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['fontsize', 'fontname']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video']],
        ['view', ['fullscreen', 'codeview', 'help']],
    ],
}

这样配置之后，Django 中就可以使用 summernote 了。

3. 在模板中引用 summernote

在需要使用 summernote 富文本编辑器的页面中引用 summernote：

{% extends 'base.html' %}

{% block content %}
    <h1>Post a new article</h1>
    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        {{ form.content|summernote }}
        <button type="submit">Submit</button>
    </form>
{% endblock %}

这里的 {{ form.content|summernote }} 是通过模板标签将 content 字段渲染成 summernote 的富文本编辑器。

示例一：上传图片到七牛云

假设我们要将上传图片保存到七牛云上，那么我们可以在 settings.py 文件中添加以下配置：

SUMMERNOTE_CONFIG = {
    'width': '100%',
    'height': '300',
    'toolbar': [
        # ...
        ['insert', ['link', 'picture']],
        # ...
    ],
    'callback': {
        'onImageUpload': 'uploadImageToQiniu',
    },
}

QINIU_ACCESS_KEY = 'your_access_key'
QINIU_SECRET_KEY = 'your_secret_key'
QINIU_BUCKET_NAME = 'your_bucket_name'
QINIU_DOMAIN = 'http://your_domain/'

QINIU_URL = 'https://up.qiniup.com/'

这样配置之后，添加文章时可以直接上传本地图片到七牛云上。

示例二：使用自定义模板

还可以根据自己的需求使用自定义模板。首先在项目模板文件夹下创建 summernote 文件夹，然后新建一个名为 summernote.html 的模板文件：

{% load static %}
<script type="text/javascript" src="{% static 'django_summernote/summernote-bs4.min.js' %}"></script>
<script type="text/javascript" src="{% static 'django_summernote/lang/summernote-zh-CN.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'django_summernote/summernote-bs4.css' %}">
<label for="{{ id_for_label }}" class="control-label">{{ label }}</label>
<div>
    <textarea name="{{ name }}" class="summernote{% if is_required %} required_field{% endif %}" id="{{ id_for_label }}" {% if is_required %}required{% endif %}>{% if value %}{{ value|safe }}{% endif %}</textarea>
</div>
<script>
    $(document).ready(function(){
        $('#{{ id_for_label }}').summernote({
            lang: 'zh-CN',
            height: 300,
            minHeight: null,
            maxHeight: null,
            focus: true,
            callbacks: {
                onInit: function(){
                    console.log('Summernote is launched');
                }
            },
            fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
            fontNamesIgnoreCheck: ['Arial', 'Comic Sans MS'],
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['picture', ['picture']],
                ['table', ['table']],
                ['link', ['link']],
                ['video', ['video']],
                ['codeview', ['codeview']],
            ]
        });
    });
</script>

这个模板与 Django-summernote 自带的模板相比可以更好地适应自己的需求。最后在项目 settings.py 文件中添加以下配置：

SUMMERNOTE_CONFIG = {
    'width': '100%',
    'height': 'auto',
    'toolbar': [
        # ...
    ],
    'summernote': {
        'toolbar': [
            # ...
            ['custom', ['hello']],
        ],
        'buttons': {
            'hello': HelloButton,
        },
        'popover': {
            'air': [
                ['color', ['color']],
                ['font', ['bold', 'underline', 'clear']],
                ['para', ['paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture']],
                ['view', ['fullscreen', 'codeview']],
            ],
        },
        'lang': 'zh-CN',
    },
    'template_name': 'summernote/summernote.html',
}

这样配置之后，显示的编辑器就会变成自定义模板中的样子。

以上就是使用 Django 集成 summernote 富文本编辑器的详细步骤和示例，希望可以对你有所帮助。