- 介绍了
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之后引入,否则就会报找不到的错误,如下:
|
|
如果使用框架应该就没有引入顺序这些麻烦了吧:neutral_face:
结束语
OK。本文就介绍在这里,有什么问题欢迎在评论区与我讨论。实现/修改代码在仓库Cuiks/django-quill-editor。
:end: