1. html（代码复制在下面）
<quill-editor
v-model=”form.instructions”
ref=”myQuillEditor”
:options=”editorOption”
@blur=”onEditorBlur($event)” @focus=”onEditorFocus($event)”
@change=”onEditorChange($event)” >
</quill-editor>
<input type=”file” @change=”change” id=”upload” style=”display:none;” />
2.需要安装对应的插件
使用富文本时候安装插件：
npm i vue-quill-editor -S
进行图形的缩放
npm i quill-image-drop-module -S
npm i quill-image-resize-module -S
图片上传
npm i quill-image-extend-module -S
但是一般会报错，安装之后，下面会用另一种方法；（文章末尾）
在js中引用
import {quillEditor} from ‘vue-quill-editor’
import Quill from ‘quill’
import {ImageDrop} from ‘quill-image-drop-module’
import ImageResize from ‘quill-image-resize-module’
import { container,ImageExtend, QuillWatch} from ‘quill-image-extend-module’
import { upload } from “@/api/system/user”;
Quill.register(‘modules/ImageExtend’, ImageExtend);
Quill.register(‘modules/imageDrop’, ImageDrop);
Quill.register(‘modules/imageResize’, ImageResize);
对应的富文本：
//富文本编辑器
editorOption: {
modules: {
imageDrop: true, //图片拖拽
imageResize: { //放大缩小
displaySize: true
},
toolbar: {
container: [
[“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”], // 清除文本格式
[“link”, “image”, “video”] // 链接、图片、视频
],
handlers: {
image: function(value) {
// debugger;
if (value) {
document.getElementById(‘upload’).click()
} else {
this.quill.format(‘image’, false)
}
},
}
},
syntax: {
highlight: text => hljs.highlightAuto(text).value
}
},
},
在上面的HTML中定义绑定了change事件，同时绑定id就是上传图片的接口(本文中是upload)
下面就是相应的change事件
change(e) {
debugger;
let file = e.target.files[0]
const formData = new FormData()
formData.append(‘file’, file)
upload(formData).then(res => {
let quill = this.$refs.myQuillEditor.quill
if (res.code === 200) {
let length = quill.getSelection().index
quill.insertEmbed(length, ‘image’, res.data)
quill.setSelection(length + 1)
}
})
.catch(err => {
console.error(err)
})
},