1.下载并引入
npm install --save vue-quill-editor
import { quillEditor, Quill } from "vue-quill-editor"
import {ImageExtend, QuillWatch } from "quill-image-extend-module"
Quill.register('modules/ImageExtend', ImageExtend)
2.写入标签
<quill-editor class="myQuillEditor" v-model="medicalDocs.content" ref="myQuillEditor" :options="editorOption"></quill-editor>
3.js
components: { quillEditor }
data(){
return{
medicalDocs: {content: ""},
editorOption: {
placeholder: "请在这里输入",
modules: {
ImageExtend: {
// 如果不作设置，即{} 则依然开启复制粘贴功能且以base64插入
name: "file", // 图片参数名
size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
action: this.api.uploadFile, // 服务器地址, 如果action为空，则采用base64插入图片
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: res => {
// console.log('res=======', res);
return res.content.url;
},
headers: xhr => {
// 上传图片请求需要携带token的 在xhr.setRequestHeader中设置
xhr.setRequestHeader(
"Authorization", 'Bearer ' + localStorage.getItem('token')
// this.getCookie("username")
// ? this.getCookie("username").token_type +
// this.getCookie("username").access_token
// : "Basic emh4eTp6aHh5"
);
}, // 可选参数 设置请求头部
sizeError: () => {}, // 图片超过大小的回调
start: () => {}, // 可选参数 自定义开始上传触发事件
end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
error: () => {}, // 可选参数 上传失败触发的事件
success: () => {}, // 可选参数 上传成功触发的事件
change: (xhr, formData) => {
// xhr.setRequestHeader('myHeader','myValue')
// formData.append('token', 'myToken')
} // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
},
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
[{'header': 1}, {'header': 2}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
[{'list': 'ordered'}, {'list': 'bullet'}], //列表
[{'size': ['small', false, 'large', 'huge']}], // 字体大小
[{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
["image"]
],
handlers: {
image: function() {
// 劫持原来的图片点击按钮事件
QuillWatch.emit(this.quill.id);
}
}
},
}
}
}
}
