vuequilleditor 上传图片vue3
时间: 2023-11-15 19:05:36 浏览: 38
可以使用vue-quill-editor的自定义上传图片功能来实现上传图片的功能。具体步骤如下:
1. 安装依赖
```
npm install vue-quill-editor --save
npm install quill-image-resize-module --save
```
2. 在main.js中引入依赖
```
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import ImageResize from 'quill-image-resize-module'
Vue.use(VueQuillEditor, {
modules: {
ImageResize: ImageResize
}
})
```
3. 在组件中使用
```
<template>
<div>
<quill-editor v-model="content" :options="editorOption"></quill-editor>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
editorOption: {
modules: {
toolbar: [
['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: [] }],
['clean'],
['link', 'image', 'video']
],
ImageResize: {
displaySize: true
}
}
}
}
}
}
</script>
```
在上述代码中,我们使用了vue-quill-editor的自定义上传图片功能,即在toolbar中添加了'image'按钮,同时在modules中添加了ImageResize模块,用于调整图片大小。