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.使用

"blogContext"   //编辑器内容字段
              ref="myQuillEditor"
              style="background-color: white;"
              class="editer">

"blogContext"   //编辑器内容字段
              ref="myQuillEditor"
              style="background-color: white;"
              class="editer">

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存储的，如果图片多了我们把这个存储到数据库可能就会有各种各样的问题，所以我们需要改一下此图片上传方式。

1. 首先，我们先放一个Element的上传组件，把它隐藏起来
2. 我们在给编辑器增加一个拦截器，拦截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.使用

"blogContext"   //编辑器内容字段
              ref="myQuillEditor"
              style="background-color: white;"
              class="editer">

"blogContext"   //编辑器内容字段
              ref="myQuillEditor"
              style="background-color: white;"
              class="editer">

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存储的，如果图片多了我们把这个存储到数据库可能就会有各种各样的问题，所以我们需要改一下此图片上传方式。

1. 首先，我们先放一个Element的上传组件，把它隐藏起来
2. 我们在给编辑器增加一个拦截器，拦截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了。