Vue

使用 vue-quill-editor_自定义toolbar_修改图片上传方式

Posted by 石玉军 on 2018-07-26

1.安装
npm install vue-quill-editor --save
2.引入

1
2
3
4
import { quillEditor } from 'vue-quill-editor'
components: {
quillEditor
},

3.使用

1
2
3
4
5
<quill-editor v-model="blogContext"   //编辑器内容字段
ref="myQuillEditor"
style="background-color: white;"
class="editer">
</quill-editor>

4.自定义toolbar
因为这个编辑器有一些功能感觉是用不上的,但是如果放着它对用户来说实在不是那么友好,所以就修改了一下源码。我们找到node_modules/vue-quill-editor/src/editor.vue文件,打开这个文件我们会看到一个toolbar属性,大致是这样的:
图片

他们对应的功能的分别是这样的

背景颜色 - background 加粗- bold 颜色 - color 字体 - font 内联代码 - code 斜体 - italic 链接 - link 大小 - size 删除线 - strike 上标/下标 - script 下划线 - underline 引用- blockquote 标题 - header 缩进 - indent 列表 - list 文本对齐 - align 文本方向 - direction 代码块 - code-block 公式 - formula 图片 - image 视频 - video 清除字体样式- clean

大家可以根据自己的需要删除不必要的toolbar。

关于删除以后的源码问题可以参考 我的另一篇文章:Git之如何优雅的修改Vue源码以后让Git记录你修改的那一部分

5.修改文件上传方法
因为默认此编辑器上传的图片是以base64存储的,如果图片多了我们把这个存储到数据库可能就会有各种各样的问题,所以我们需要改一下此图片上传方式。

首先,我们先放一个Element的上传组件,把它隐藏起来
我们在给编辑器增加一个拦截器,拦截toolbar为image的组件

1
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler);

3.当用户单击编辑器的文件上传按钮时会调用imgHandler方法,我们在这个方法里面调用第一步隐藏的Element上传组件。

4.紧接着我们把使用的Element上传组件上传完成的图片地址拼接到blogContext属性上就ok了。