vue2.0集成ueditor以及图片上传，视频上传总结

一.需求背景

前段时间因业务反馈现有编辑器wangEditor功能没有百度编辑器

ueditor的工能全，需要在后管项目(技术栈：vue全家桶，UI框

架:MUSE Element UI)中引入ueditor，以及后续版本迭代的图片上传，支持多

图上传和视频上传(支持本地视频和外部视频上传)功能等：

二.使用总结

1.将ueditor整个目录文件放入static目录下

2.通过yarn安装依赖vue-ueditor

3.由于ueditor会在很多页面，于是将ueditor抽离成一个单独组件去维护

4.在组件中使用ueditor相关api,页面引入ueditor,

<VueEditor :ueditorPath="path" @ready="editorReady" :ueditorConfig="editorConfig" > // 相关api可以在npm参考vue-ueditor 使用方法

5.ueditor对象的相关api大家可以参考uedior官网的使用方法

6.图片上传（多图上传）

ueditor工具栏自带按钮可以自行添加，以及点击该按钮触发的逻辑，也可以自行添加，前期由于进度问题，在项目中，直接自行设计一个按钮，将按钮定位在ueditor上面，以下是展示效果：

项目中自己手写的上传图片功能，以及多图上传，很粗糙，后续优化可参考七牛上传图片

7.视频上传

视频上传支持外链(优酷，腾讯，爱奇艺视频)和本地视频上传，本地视频限制100M，视频上传使用七牛上传，由于时间问题，项目中暂时未使用七牛的分片上传逻辑，后续可优化参考，

上传外链思路：将视频网站的通用链接复制后，添加到编辑器内容里
上传视频需要在ueditor白名单中配置支持video相关属性值，以下是关键代码逻辑

const inHtml = `<div><p style="padding-bottom: 10px;"> </p><p><video controls  poster="${this.videoUpload.mainPath}"  src="${this.link}" style="width: 100%;height: 200px;object-fit: fill"></video></p></div><p style="padding-bottom: 10px;"> </p>`;this.ueditor.execCommand('inserthtml', inHtml);