vue-quill-editor是一个简单实用的富文本编辑器(官网),内置提供quill-image-extend-module模块(地址)支持图片上传图片到服务器而不是生成base64,但是有个明显的缺陷是只能上传一张(即使不用这个插件也只能上传一张生成base64 =。=), 这是个明显缺陷,而且操作后台的运营肯定不干(我™辛辛苦苦整理好的商品详情图片列表你让我一个个上传?),所以还是要多图片上传还是要实现,请看下面代码:
基于vue-quill-editor 再做一次封装:
<template>
<div class="quill-editor-container">
<quill-editor
v-if="showEditor"
v-model="content"
:options="editorOption"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
复制代码
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { getUploadSign } from "@/api/goods"
// 配置参照这里(第一个模板)
// https://github.com/surmon-china/vue-quill-editor/blob/master/examples/01-example.vue
import toolbar from './toolbar'
const Delta = Quill.import('delta')
export default {
name: 'QuillEditor',
components: {
quillEditor
},
props: {
value: {
type: String,
default: '',
}
},
data () {
return {
showEditor: false,
imgSign: {},
content: this.v