TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频,被替换成img标签

以前用百度的UE,代码陈旧,有很多定制化的需求改起来很费劲,后来发现研究TinyMCE编辑器,发现更成熟,所以转向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">



然后找官方文档,发现有个参数: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-8
  
  if(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=""

效果图如下:(默认还有边框,我不喜欢就给去掉了)

posted @ 2025-05-07 00:37  Dy大叔  阅读(210)  评论(0)    收藏  举报