vue-quill-editor 自定义工具栏和自定义图片上传路径

 

背景：

1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现，需要删除部分功能。

2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区，这会导致content字符长度太长，不一定可以传到后台保存（其实即使可以保存也不推荐这种方案）。所以我们需要将方案修改为将图片上传到服务器，然后通过URL的 方式访问到图片回显及使用。

vue-quill-editor工具栏改造及自定义图片上传（这里使用的是element-ui的上传组件）：

引入插件（vue引入vue-quill-editor自行问度娘）

vue html

<el-upload class="avatar-uploader quill-img" name="file" 
:action="uploadImgUrl" 
:show-file-list="false" 
:headers="uploadHeaders" 
:on-success="quillImgSuccess" 
:before-upload="quillImgBefore" 
accept='.jpg,.jpeg,.png,.gif'>
</el-upload>

<quill-editor ref="myTextEditor" 
v-model="yearReviewForm.workCompletion"