解决TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频，被替换成img标签的问题

以前用百度的UE，代码陈旧，有很多定制化的需求改起来很费劲，后来发现国外有个一直在维护的TinyMCE编辑器，功能强大，便转跳到这个坑里了。
目前遇到的坑：富文本编辑器里上传了本地视频之后，会默认给替换成一个img标签，如下：
<img class="mce-object mce-object-video" src="https://img-blog.csdnimg.cn/2022010706414632839.gif" width="300" height="150" data-mce-p-controls="controls" data-mce-html="XXXXXXXXXXXX.mp4XXXXX" data-mce-object="video"></p>

TIM图片20190708175431.png

TIM图片20190708175449.png

然后找官方文档，发现有个参数：media_live_embeds：开启此选项后，用户可看到编辑区内嵌入视频的实时预览，而不是占位图。
然鹅：并不起作用。
github有相关问题issue，说是起作用，但是自己还是没用。
最后无奈，扒源码。终于发现：
media_live_embeds这个参数是针对于内嵌视频代码的参数，置为true的时候则能预览内嵌的代码视频。源代码是这样判断的：

if (node.name === 'iframe' && Settings.hasLiveEmbeds(editor) && global$8.ceFalse) {if (!isWithinEmbedWrapper(node)) {node.replace(createPreviewIframeNode(editor, node));}}

只能靠自己改源码了，修改media插件如下：

第一步：要给video标签增加src属性，其实从createPreviewIframeNode方法的参数中也能拿到，但是是字符串，需要自己解析，我不想解析了，所以创建一个全局变量，后边可以直接用。（我写在了大约695行，其他地方貌似也可以，初始化创建即可）

var videoSource=""//需要设置成全局变量

第二步：增加判断node.name==video的时候，替换成video节点：

if(node.name === 'video' && Settings.hasLiveEmbeds(editor) && global$8.ceFalse){//node.attributes['map'].src有值时是video本身带src，node.firstChild有值表示有source标签 。分别提取src赋值给videoSource  2019-10-8if(node.attributes['map'] && node.attributes['map'].src){videoSource = node.attributes['map'].src}else{for(var ii=0;ii<node.attributes.length;ii++){if(node.attributes[ii].name == "src"){videoSource = node.map.node.attributes[ii].value}}}if(node.firstChild && node.firstChild.value){var elel=node.firstChild && $(node.firstChild.value)videoSource = elel.attr('src')}node.replace(createPreviewIframeNode(editor, node));}

第三步：createPreviewIframeNode方法中（大约1100行），这是为了创建video标签，增加属性。同时在创建完之后要将videoSource再置空。

previewNode.attr({allowfullscreen: node.attr('allowfullscreen'),style: node.attr('style'),class: node.attr('class'),width: node.attr('width'),height: node.attr('height'),frameborder: '0',src:videoSource || node.attr('src'),//这是增加的属性，videoSource是从第三步来的controls:'controls'//z这是增加的属性});
videoSource=""

好了 OVER！
效果图如下：（默认还有边框，我不喜欢就给去掉了）

TIM图片20190708181122.png

原文转自：https://www.jianshu.com/p/33a9a65b38c7

解决TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频，被替换成img标签的问题相关推荐

ueditor富文本编辑器上传视频/音频光标显示位置错误
用以下样式拼接视频/音频,路径换成所需路径: //拼接元素样式视频 video_html = `<p><video src='${data.url}' width="32 ...
KindEditor富文本编辑器上传功能PHP语言报错问题
问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...
编辑器图片上传 linux,summernote 富文本编辑器上传本地图片
jQuery version: 1.12.4 Bootstrap version: 3.3.7 summernote 是基于jQuery 和 Bootstrap 的轻量级富文本编辑器所以在使用sum ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...

解决TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频，被替换成img标签的问题

解决TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频，被替换成img标签的问题相关推荐

最新文章

热门文章