一.基础用法

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 的图片上传，上传成功后返回图片链接。

  1. 在编辑器项中配置配置项

    editorOption: {modules: {toolbar: {container: toolbarOptions, // 工具栏handlers: {'image': function(value) {if (value) {alert('点击了上传图片')} else {this.quill.format('image', false);}}}}placeholder: "输入内容..."}, //编辑器配置项},

  2. 调用 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// 如果上传成功返回图片URLif (res) {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片，res为服务器返回的图片链接地址quill.insertEmbed(length, 'image', res)// 调整光标到最后quill.setSelection(length + 1)} else {// 提示信息，需引入MessageMessage.error('图片插入失败')}},}

    这样就完成了图片上传的功能。

四.调整图片大小

1.在原本的quill-editor能正常使用的情况下，安装quill-image-drop-module和quill-image-resize-module

npm install quill-image-drop-module -Snpm 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 imageResizefrom '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'}) ], },

这样就导入完成了，如下图所示