vue版本:vue cli3
插件:vue-quill-editor
插件增强模块:quill-image-extend-module
quill-image-extend-module功能:提供图片上传到服j务器的功能(复制插入,显示上传进度,显示上传成功或者失败)
1:安装插件
npm install vue-quill-editor --save-dev
npm install quill-image-extend-module --save-dev
2:引入
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
实现思路:使用 quill-editor,通过改写 ImageExtend,进行图片上传、 img 标签改写(将图片地址插入 img 标签)
效果:可以实现图片上传服务器、图片地址以 src 方式插入 img 标签并回显在 quill 编辑器内容中
<template>
<div class="testuploadquillpicandback">
<quill-editor @change="onEditorChange($event)"
id="desc" ref="quill" v-model="desc" :options="editorOption">
</quill-editor>
</div>
</template>
<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
export default{
data() {
return {
desc: '',
editorOption: {
placeholder: '此处输入赛事规程',
modules: {
ImageExtend: {
loading: true,
name: 'file',//图片参数名
size: 1, // 可选参数 图片大小,单位为M,1M = 1024kb
action: '/feelings/common/upload/file',//上传的服务器地址,如果action为空,则采用base64插入图片
// response 为一个函数,用来获取服务器返回的具体图片地址
response: res => {
console.log(res)
const imgUrl = 'http://' + res.data
return imgUrl
},
headers: xhr => {
// 上传图片请求需要携带token的 在xhr.setRequestHeader中设置,这里我的token存放在sessionStorage中
xhr.setRequestHeader("token", window.sessionStorage.getItem('token'))
},
// 可选参数 设置请求头部
sizeError: () => {}, // 图片超过大小的回调
start: () => {}, // 可选参数 自定义开始上传触发事件
end: () => {}, // 可选参数 自定义上传结束触发的事件,无论成功或者失败
error: () => {}, // 可选参数 上传失败触发的事件
success: () => {
console.log('ImageExtend中的success:上传成功')
}, // 可选参数 上传成功触发的事件
change: (xhr, formData) => {
// xhr.setRequestHeader('myHeader','myValue')
// formData.append('token', 'myToken')
} // 可选参数 每次选择图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData
},
// 如果不上传图片到服务器,此处不必配置
toolbar: {
// container为工具栏,此次引入了全部工具栏,也可自行配置
container: [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ header: 1 }, { header: 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: [] }],
["image"]
],
// 上传成功,回显图片(会进入如上面ImageExtend的各过程,返回<img src="http://xx.xx.xx.xx:xxxx/file/xxx.jpg">)
handlers: {
image: function() {
// 劫持原来的图片点击按钮事件
QuillWatch.emit(this.quill.id)
}
}
}
}
},
}
},
methods: {
// quill的change事件
onEditorChange(e) {
console.log('onEditorChange打印e')
console.log(e)
}
}
}
</script>