学习目标富文本的使用:
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,但是还未发现。
希望各位朋友能监督学习。欢迎一起讨论,研究~