富文本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代码里的图片地址是我们七牛云上的地址

转自 ： https://blog.csdn.net/weixin_34235457/article/details/87271424