背景：
1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现，需要删除部分功能。
2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区，这会导致content字符长度太长，不一定可以传到后台保存（其实即使可以保存也不推荐这种方案）。所以我们需要将方案修改为将图片上传到服务器，然后通过URL的 方式访问到图片回显及使用。
vue-quill-editor工具栏改造及自定义图片上传（这里使用的是element-ui的上传组件）：
引入插件（vue引入vue-quill-editor自行问度娘）
vue html
<el-uploa
在使用Vue.js开发Web应用时，常常会遇到需要集成富文本编辑器的需求，Vue-quill-editor是一个非常流行的轻量级富文本编辑器组件，它基于Quill库进行封装，提供了丰富的功能和良好的用户体验。然而，在实际项目中，我们可能需要根据特定需求对编辑器进行定制，比如调整工具栏和实现自定义图片上传。以下将详细讲解如何进行这些操作。
关于自定义工具栏，Vue-quill-editor允许开发者通过`options.modules.toolbar`配置项来自定义工具栏的展示。例如，我们可以只保留必要的功能按钮，删除默认的一些不常用或不需要的选项。在上述代码中，可以看到一个示例的工具栏配置：
```javascript
editorOption: {
placeholder: 'Please enter it here...',
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['image']
],
handlers: {
'image': function(val) {
if (val) {
document.querySelector('.quill-img input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}
```
在这个配置中，我们移除了默认工具栏中的视频上传按钮，同时添加了一个图片上传按钮。`handlers`对象用于处理特定的按钮事件，例如这里的`image`事件，用于触发图片上传。
对于自定义图片上传，Vue-quill-editor默认使用Base64编码存储图片，但这种方法可能会导致内容过长，不利于服务器存储。因此，我们需要改用将图片上传到服务器并返回URL的方式。这里利用了Element-UI的`el-upload`组件来完成这一任务：
```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>
```
在图片上传成功后，需要将服务器返回的图片URL插入到编辑器中，同时确保图片格式正确：
```javascript
quillImgSuccess(res, file) {
if (res.code === '00001') {
let quill = this.$refs.myTextEditor.quill;
let length = quill.getSelection().index;
quill.insertEmbed(length, 'image', '/static-resource/' + res.body);
quill.setSelection(length + 1);
} else {
this.$message.error('图片插入失败');
}
},
quillImgBefore(file) {
let fileType = file.type;
if (fileType === 'image/jpeg' || fileType === 'image/png') {
return true;
} else {
this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
return false;
}
},
```
`quillImgSuccess`方法接收服务器返回的响应，成功时将图片URL插入到编辑器，并调整光标位置。`quillImgBefore`方法则用于在图片上传前进行格式检查，确保上传的是合法的图片文件。
总结来说，通过自定义Vue-quill-editor的工具栏和图片上传策略，我们可以更好地满足项目的特定需求，提高用户体验，同时也更高效地管理服务器资源。在实际操作中，开发者需要根据自身项目的需求调整工具栏配置和上传逻辑，确保与后端接口的无缝对接。
