富文本的使用

学习目标富文本的使用：

tinymce 富文本 上传本地视频的解决办法：

由于官方自带的上传视频是会用一个图片占位符代替视频标签，导致预览的时候没办法看。
自己项目摸索了一下，用了第三方上传在植入到富文本中，才解决的。

• 第一步 在富文本上加了一个按钮 用来专门上传视频或者文件。
  如图
  

• 上传的我是单独在富文本的组件中再加一个上传的组件
  所有的上传相关都写在 EditorImage这个组件里面
  
  下面是将上传得到的url 放到富文本中
  

//代码片段
h = ` <video src=${res.url} class="mceNonEditable" style="width: 200px;height:120px;display: inline-block;" controls="controls" ></video> `;

// 这个方法是把上面的html设置到富文本中
window.tinymce.get(_this.tinymceId).insertContent(h);

效果如下（ 可以随意排序 、删除）

总结：

纯属个人摸索的结果，可能还会存在各种隐藏的bug，但是还未发现。
希望各位朋友能监督学习。欢迎一起讨论，研究~