quill-image-extend-module
vue-quill-editor的加强模块,
功用:
- 供应图片上传到服务器的功用
- 复制插进去
- 拖拽插进去
- 显现上传进度
- 显现上传胜利或许失利
- 支撑与其他模块一同运用(比方调解图片大小)
Install
npm install quill-image-extend-module --save-dev
use
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
example
<template>
<div class="quill-wrap">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
>
</quill-editor>
</div>
</template>
<script>
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
export default {
components: {quillEditor},
data() {
return {
content: '',
// 富文本框参数设置
editorOption: {
modules: {
ImageExtend: {
loading: true,
name: 'img',
action: updateUrl,
response: (res) => {
return res.info
}
},
toolbar: {
container: container,
handlers: {
'image': function () {
document.querySelector('.quill-image-input').click()
}
}
}
}
}
}
}
}
</script>
quill-image-extend-module 的一切可设置项
editorOption: {
modules: {
ImageExtend: {
loading: true, // 可选参数 是不是显现上传进度和提醒语
name: 'img', // 图片参数名
size: 3, // 可选参数 图片大小,单元为M,1M = 1024kb
action: updateUrl, // 服务器地点, 假如action为空,则采纳base64插进去图片
// response 为一个函数用来猎取服务器返回的详细图片地点
// 比方服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: (res) => {
return res.info
},
headers: (xhr) => {}, // 可选参数 设置要求头部
start: () => {}, // 可选参数 自定义最先上传触发事宜
end: () => {}, // 可选参数 自定义上传完毕触发的事宜,不管胜利或许失利
error: () => {}, // 可选参数 自定义收集毛病触发的事宜
change: (xhr, formData) => {} // 可选参数 挑选图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData
},
toolbar: {
container: container, // container为工具栏,此次引入了悉数工具栏,也可自行设置
handlers: {
'image': function () { // 挟制本来的图片点击按钮事宜
document.querySelector('.quill-image-input').click()
}
}
}
}
}
注意事项 (matters need attention)
因为差别的用户的服务器返回的数据格式不尽相同
因而
在设置中,你必需以下操纵
// 你必需把返回的数据中所包括的图片地点 return 归去
respnse: (res) => {
return res.info // 这里切纪要return回你的图片地点
}
比方你的服务器返回的胜利数据为
{
code: 200,
starus: true,
result: {
img: 'http://placehold.it/100x100' // 服务器返回的数据中的图片的地点
}
}
那末你应该在参数中写为:
// 你必需把返回的数据中所包括的图片地点 return 归去
respnse: (res) => {
return res.result.img // 这里切纪要return回你的图片地点
}
与其他模块一同运用(以resize-module为例子)
<template>
<div class="quill-wrap">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
>
</quill-editor>
</div>
</template>
<script>
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend} from 'quill-image-extend-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/ImageExtend', ImageExtend)
// use resize module
Quill.register('modules/ImageResize', ImageResize)
export default {
components: {quillEditor},
data() {
return {
content: '',
// 富文本框参数设置
editorOption: {
modules: {
ImageResize: {},
ImageExtend: {
loading: true,
name: 'img',
size: 2, // 单元为M, 1M = 1024KB
action: updateUrl,
headers: (xhr) => {
},
response: (res) => {
return res.info
}
},
toolbar: {
container: container,
handlers: {
'image': function () {
document.querySelector('.quill-image-input').click()
}
}
}
}
}
}
}
}
</script>