富文本vue-quill-editor整合七牛云上传图片

1.概述

实现前提:

• Element UI:上传使用的是Element 的el-upload组件,可以参考http://element.eleme.io/#/zh-CN/component/upload
• quill-editor:富文本处理，可以参考文档https://surmon-china.github.io/vue-quill-editor/
• 参考文章大神的文章https://github.com/NextBoy/skill/issues/2，这里主要讲解的是如何使用Element和quill-editor还有七牛云整合的思路

实现思路：
根据大神的文章，大概思路如下：

• 1.先用el-upload组件实现和七牛云的上传。
• 2.隐藏掉el-upload组件。
• 3.处理点击富文本框的图片的按钮的时候，调用el-upload的上传。
• 4.上传成功后，拼接好图片的地址，按照光标的为止插入到富文本中

目标:将上面的部分封装成组件，提供给每个页面方面的使用

1.实现代码

1.1 组件定义

1.2 组件的使用

1.2.1 引入组件

import SquillEditorQiniu from '@/components/quill-editor-qiniu.vue';

1.2.2 注册成组件

 components:{
        SquillEditorQiniu //富文本框上传组件
    }

1.2.3 放入组件

• token:需要从后台获取，后台和七牛云请求得到
• v-model: 你最后得到的文本的属性
• domain: 七牛云的域，可以从七牛云获取到
• uploadUrl: 上传地址，也是从七牛云获取

1.2 实现效果

实现效果

我们可以看到最终上传一个图片，里面html代码里的图片地址是我们七牛云上的地址