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

参考大佬思路：改造vue-quill-editor：实现图片上传到服务器再插入富文本 · Issue #2 · NextBoy/skill · GitHub

概述

1、Element UI:上传使用的是Element 的el-upload组件。

2、quill-editor:富文本处理。

前期准备

1、七牛云指定空间的上传token，得通过服务器获取。

func GetToken() string {
	putPolicy := storage.PutPolicy{
		//七牛云对象存储空间名称
		Scope: QinNiuVideoScope,
		//token过期时间
		Expires: uint64(time.Now().AddDate(0,0,1).Unix()),
	}

	mac := qbox.NewMac(accessKey, secretKey)
	return putPolicy.UploadToken(mac)
}

2、七牛云指定空间的域名，需公开空间，否则无法展示。

3、上传地址，根据七牛云服务器所在地区选择。如华东机房：

// regionHuadong 表示华东机房
	regionHuadong = Region{
		SrcUpHosts: []string{
			"up.qiniup.com",
			"up-nb.qiniup.com",
			"up-xs.qiniup.com",
		},
		CdnUpHosts: []string{
			"upload.qiniup.com",
			"upload-nb.qiniup.com",
			"upload-xs.qiniup.com",
		},
		RsHost:    "rs.qbox.me",
		RsfHost:   "rsf.qbox.me",
		ApiHost:   "api.qiniu.com",
		IovipHost: "iovip.qbox.me",
	}

前端代码

1、组件：squill-editor-qiniu.vue

2、组件使用：

//引用组件
import SquillEditorQiniu from "@/components/squill-editor-qiniu.vue";

//表单使用