解决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-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=""

 

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

 

TIM图片20190708181122.png

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