VUE-QUILL-EDITOR 基于 QUILL、适用于 VUE 的富文本编辑器,支持服务端渲染和单页应用,非常高效简洁。
一.基础用法
1、NPM 导入 VUE-QUILL-EDITOR
npm install vue-quill-editor --save
2、引入 VUE-QUILL-EDITOR
在全局中引入
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { 默认全局 } */)
在指定的 vue 文件中引入
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
3、在 VUE 中使用
export default {
data() {
return {
content: `这是 vue-quill-editor 的内容!`, //双向数据绑定数据
editorOption: {}, //编辑器配置项
}
},
methods: {
onEditorBlur() {}, // 失去焦点触发事件
onEditorFocus() {}, // 获得焦点触发事件
onEditorChange() {}, // 内容改变触发事件
}
}
到这里一个默认的富文本编辑器已经导入使用了,如下图所视!
二.升级用法
一般的,我们在使用的时候并不需要这么多功能,可以适当的对编辑器配置项进行配置。
editorOption: {
modules:{
toolbar: [
['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
['blockquote', 'code-block'], //引用,代码块
[{'header': 1}, {'header': 2}], // 标题,键值对的形式;1、2表示字体大小
[{'list': 'ordered'}, {'list': 'bullet'}], //列表
[{'script': 'sub'}, {'script': 'super'}], // 上下标
[{'indent': '-1'}, {'indent': '+1'}], // 缩进
[{'direction': 'rtl'}], // 文本方向
[{'size': ['small', false, 'large', 'huge']}], // 字体大小
[{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
[{'color': []}, {'background': []}], // 字体颜色,字体背景颜色
[{'font': []}], //字体
[{'align': []}], //对齐方式
['clean'], //清除字体样式
['image', 'video'] //上传图片、上传视频
]
},
placeholder: "输入内容..."
}, //编辑器配置项
可以根据自己的实际需求,保留相应的工具栏。
三.图片上传
vue-quill-editor 默认的是以 base64 保存图片,会直接把图片 base64 和内容文本一起以字符串的形式提交到后端。这样小图片还行,如果要上传大图片会提示上传失败,优秀的前端打字员显然不会这样做。
思路
- 可以先将图片上传至服务器,再将图片链接插入到富文本中显示
- 图片上传可以自定义一个组件或者使用 iview 的上传图片的组件(我在项目中使用的是自定义的组件,这里演示使用 iview 组件上传)
- 上传图片的组件需要隐藏,点击图片上传时调用 iview 的图片上传,上传成功后返回图片链接。
-
在编辑器项中配置配置项
editorOption: { modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: { 'image': function(value) { if (value) { alert('点击了上传图片') } else { this.quill.format('image', false); } } } } placeholder: "输入内容..." }, //编辑器配置项 },
-
调用 iview 的上传组件。
HTML:
CSS:
.ivu-upload { display: none; }
JS:
data () { return { content: '', editorOption: { modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: { 'image': function (value) { if (value) { // 调用iview图片上传 document.querySelector('.ivu-upload .ivu-btn').click() } else { this.quill.format('image', false); } } } } } } } }, methods: { handleSuccess (res) { // 获取富文本组件实例 let quill = this.$refs.myQuillEditor.quill // 如果上传成功返回图片URL if (res) { // 获取光标所在位置 let length = quill.getSelection().index; // 插入图片,res为服务器返回的图片链接地址 quill.insertEmbed(length, 'image', res) // 调整光标到最后 quill.setSelection(length + 1) } else { // 提示信息,需引入Message Message.error('图片插入失败') } }, }
这样就完成了图片上传的功能。
四.调整图片大小
1.在原本的quill-editor能正常使用的情况下,安装quill-image-drop-module和quill-image-resize-module
npm install quill-image-drop-module -S
npm install quill-image-resize-module -S
2.我是在全局注册的quill-editor,在main.js中加入以下代码
//富文本编辑器
import VueQuillEditor, { Quill } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import imageResize from 'quill-image-resize-module' // 调整大小组件。
import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
Quill.register('modules/imageResize', imageResize );
Quill.register('modules/imageDrop', ImageDrop);
Vue.use(VueQuillEditor);
3.在 editorOption 中添加配置 在modules中与 history/toolbar平级
imageDrop: true, //图片拖拽
imageResize: { //放大缩小
displayStyles: {
backgroundColor: "black",
border: "none",
color: "white"
},
modules: ["Resize", "DisplaySize", "Toolbar"]
},
4.在项目文件 vue.config.js 加上配置。(这一步很重要,如果不配置会报错!)
const webpack = require('webpack'); //导入 webpack 模块
//在模块中加入
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
],
},
这样就导入完成了,如下图所示
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
创建项目 diango-admin startproject 项目名称 命令行创建的项目:标准 pycharm:标准加东西1 templates目录(删除) 2在settings的py文件中多一句DIRS (删除,删除后是DIRS[]) 文件介绍: manag…