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

1.安装
npm install vue-quill-editor --save install vue-quill-editor --save
2.引入
import { quillEditor } from 'vue-quill-editor' components: { quillEditor }, {
quillEditor } from 'vue-quill-editor' components: { quillEditor },
3.使用
<quill-editor v-model="blogContext" //编辑器内容字段 ref="myQuillEditor" style=
"background-color: white;" class="editer"> </quill-editor> "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记录你修改的那一部分
<https://zhixiang.org.cn/#/blog/read/b4d4c2f1-4006-4d8c-871e-9902810814a8>

5.修改文件上传方法

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

* 首先，我们先放一个Element的上传组件，把它隐藏起来
* 我们在给编辑器增加一个拦截器，拦截toolbar为image的组件 this.$refs.myQuillEditor.quill.getModule(
'toolbar').addHandler('image', this.imgHandler);
.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this
.imgHandler);
3.当用户单击编辑器的文件上传按钮时会调用imgHandler方法，我们在这个方法里面调用第一步隐藏的Element上传组件。

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

1.安装
npm install vue-quill-editor --save install vue-quill-editor --save
2.引入
import { quillEditor } from 'vue-quill-editor' components: { quillEditor }, {
quillEditor } from 'vue-quill-editor' components: { quillEditor },
3.使用
<quill-editor v-model="blogContext" //编辑器内容字段 ref="myQuillEditor" style=
"background-color: white;" class="editer"> </quill-editor> "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记录你修改的那一部分
<https://zhixiang.org.cn/#/blog/read/b4d4c2f1-4006-4d8c-871e-9902810814a8>

5.修改文件上传方法

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

* 首先，我们先放一个Element的上传组件，把它隐藏起来
* 我们在给编辑器增加一个拦截器，拦截toolbar为image的组件 this.$refs.myQuillEditor.quill.getModule(
'toolbar').addHandler('image', this.imgHandler);
.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this
.imgHandler);
3.当用户单击编辑器的文件上传按钮时会调用imgHandler方法，我们在这个方法里面调用第一步隐藏的Element上传组件。

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

热门工具换一换