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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

Java学习录 2018-06-30 22:57:00 浏览1382
展开阅读全文
版权声明:本文为博主原创文章,未经博主允许不得转载。博客源地址为zhixiang.org.cn https://blog.csdn.net/myFirstCN/article/details/80870915


1.安装

npm install vue-quill-editor --save

2.引入

import { quillEditor } from 'vue-quill-editor'
components: {
    quillEditor
},

3.使用

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

  1. 首先,我们先放一个Element的上传组件,把它隐藏起来
  2. 我们在给编辑器增加一个拦截器,拦截toolbar为image的组件
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler);

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

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


1.安装

npm install vue-quill-editor --save

2.引入

import { quillEditor } from 'vue-quill-editor'
components: {
    quillEditor
},

3.使用

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

  1. 首先,我们先放一个Element的上传组件,把它隐藏起来
  2. 我们在给编辑器增加一个拦截器,拦截toolbar为image的组件
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler);

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

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


网友评论

登录后评论
0/500
评论