Django富文本编辑器django-quill-editor

介绍了django-quill-editor在Django中的使用
在django-quill-editor基础上添加了imageResize调整图片大小功能

前言

最近在做一个web项目，用到了富文本编辑器，主要目的是为了方便粘贴图片，类似截图后可以直接ctrl+v把粘贴板里的图片粘贴到编辑框中。项目使用了python3+Django，所以也就是使用一个Django的富文本编辑器。Django常用的富文本编辑器django-ckeditor，django-tinymce，django-quill，django-quill-editor等。本文主要介绍django-quill-editor的使用，因为在开发过程中发现粘贴进去的图片不能修改大小，非常不方便，于是通过Quill扩展的方式添加了图片添加大小的扩展，遂写此文章记录。:full_moon_with_face:

demo projec: Cuiks/django-quill-editor。该项目fork自kensnyder/quill-image-resize-module。添加了修改图片大小功能。

文章结构

django-quill-editor在Django中的配置及使用
django-quill-editor图片插件的配置及使用
遇到的问题

1、`django-quill-editor`在Django中的配置及使用

官方文档介绍的简单明了，但是也基本够用:neutral_face:

安装
pip install django-quill-editor

Django配置

1
2
3
4
5
6
# 添加到Django
INSTALLED_APPS = [
    'django.contrib.admin',
    ...
    'django_quill',
]

Django model配置 && 数据迁移

1
2
3
4
5
6
# models.py
from django.db import models
from django_quill.fields import QuillField

class QuillPost(models.Model):
    content = QuillField()

Django admin注册

1
2
3
4
5
6
from django.contrib import admin
from .models import QuillPost

@admin.register(QuillPost)
class QuillPostAdmin(admin.ModelAdmin):
    pass

注册完成后看到如下

Form表单使用

1
2
3
4
5
6
7
8
9
# 在前端界面使用该方法引入
<head>
    {{ form.media }}
</head>
# 或使用该方法引入
<head>
    <!-- django-quill-editor Media -->
    {% include 'django_quill/media.html' %}
</head>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
# 表单中配置
# forms.py
from django import forms
from .models import QuillPost

class QuillPostForm(forms.ModelForm):
    class Meta:
        model = QuillPost
        fields = (
            'content',
        )

# 返回的view使用表单
# views.py
from django.shortcuts import render
from .forms import QuillPostForm

def model_form_view(request):
    return render(request, 'form_view.html', {'form': QuillPostForm()})

1
2
3
4
5
# 前端页面展示表单
<!-- form_view.html -->
<form action="" method="POST">{% csrf_token %}
    {{ form.content }}
</form>

注：文档分别介绍了Using as form和Using as ModelForm。本文只介绍后者使用。

自定义配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
# 修改Django的配置文件settings.py。添加
QUILL_CONFIGS = {
    'default':{
        'theme': 'snow',
        'modules': {
            'syntax': True,
            'toolbar': [
                [
                    {'font': []},
                    {'header': []},
                    {'align': []},
                    'bold', 'italic', 'underline', 'strike', 'blockquote',
                    {'color': []},
                    {'background': []},
                ],
                ['code-block', 'link'],
                ['clean'],
            ]
        }
    }
}

关于配置项可参考：Quill Configuration

富文本编辑框的前端回显展示(Django模板语言)
1 2
# html页面展示 <div class="form-control ql-editor ql-container ql-snow">{{ object.content.html|safe }}</div>
使用conten.html属性，可以获取该字段html格式，添加safe控制，可在前端进行展示。

2、`django-quill-editor`图片插件的配置及使用

配置完成后，粘贴图片进去会发现往往图片充满了整个编辑框，看起来很不方便。通过查阅Quill文档。会发现Quill的Modules支持自定义扩展，所以确定方向：寻找(让我写，我也不会啊:new_moon_with_face:)Quill调整图片大小的扩展。QuillJS是一个比较热门的项目，很像web框架都开发了响应的扩展。在网上搜索发现项目quill-image-resize-module就是专门为Quill开发的扩展用于调整图片大小。到此我们就找到了Quill调节图片大小的方案。

接下来介绍怎么在django-quill-editor中使用自定义Modules。

下载Modules 或使用CDN引入Modules。此处我使用后者。google上找的CDN地址，也不知道稳不稳:new_moon:

项目中引入。此处需要注意，Modules必须在Quill后面引入，否则会报错。

1
2
3
4
5
<head>
    {% include 'django_quill/media.html' %}
    <!-- Quill resize-image.js -->
    <script src="https://cdn.jsdelivr.net/npm/quill-image-resize-module@3.0.0/image-resize.min.js"></script>
</head>

修改Django项目settings.py，引入imageResize

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Quill config
QUILL_CONFIGS = {
    "default": {
        'theme': 'snow',
        'modules': {
            'syntax': True,
            'toolbar': [
                [
                    {'font': []},
                    {'header': []},
                    {'align': []},
                    'bold', 'italic', 'underline', 'strike', 'blockquote',
                    {'color': []},
                    {'background': []},
                ],
                ['code-block', 'link', 'image', 'video'],
                ['clean'],
            ],
            'imageResize': {  # open imageResize
                'displaySize': True
            }
        }
    }
}

前端实现效果
效果

admin引入imageResize

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# admin.py。添加静态文件并控制引入顺序
@admin.register(QuillPost)
class QuillPostAdmin(admin.ModelAdmin):
    class Media:
        js = (
            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js',
            'django_quill/django_quill.js',
            'https://cdn.quilljs.com/1.3.7/quill.min.js',
            "https://cdn.jsdelivr.net/npm/quill-image-resize-module@3.0.0/image-resize.min.js",
        )

3、遇到的问题

上面已经强调过，Quill的Modules必须要在Quill之后引入，否则就会报找不到的错误，如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Uncaught TypeError: Cannot read property 'imports' of undefined
    at Object.<anonymous> (image-resize.min.js:1)
    at e (image-resize.min.js:1)
    at Object.<anonymous> (image-resize.min.js:1)
    at e (image-resize.min.js:1)
    at image-resize.min.js:1
    at image-resize.min.js:1
    at image-resize.min.js:1
    at image-resize.min.js:1

quill.min.js:7 quill Cannot import modules/imageResize. Are you sure it was registered?

quill.min.js:7 quill Cannot load imageResize module. Are you sure you registered it?

quill.min.js:7 quill Cannot import modules/imageResize. Are you sure it was registered?

quill.min.js:7 Uncaught TypeError: e is not a constructor
    at e.value (quill.min.js:7)
    at e.value (quill.min.js:7)
    at quill.min.js:7
    at Array.forEach (<anonymous>)
    at e.value (quill.min.js:7)
    at new t (quill.min.js:7)
    at new QuillWrapper (VM153 django_quill.js:9)
    at (index):157
    at (index):159

django_quill.js:1 Uncaught SyntaxError: Identifier 'QuillWrapper' has already been declared

如果使用框架应该就没有引入顺序这些麻烦了吧:neutral_face:

结束语

OK。本文就介绍在这里，有什么问题欢迎在评论区与我讨论。实现/修改代码在仓库Cuiks/django-quill-editor。

:end:

前言

文章结构

1、django-quill-editor在Django中的配置及使用

2、django-quill-editor图片插件的配置及使用

3、遇到的问题

结束语

1、`django-quill-editor`在Django中的配置及使用

2、`django-quill-editor`图片插件的配置及使用