vue使用tinymce上传视频后占位符显示img的问题解决

vue使用tinymce上传视频后占位符显示img的问题解决

问题：昨天使用tinymce里面的上传视频方法 上传成功以后发现回显有问题，通过控制台发现占位符变成了img格式不是video视频格式，然后也是找了各种资料发现毫无用处

解决方法：直接更改media插件源码
步骤1：找到node_modules下tinymce插件里面的media文件下的plugin.js(node_modules/tinymce/media/plugin.js)

步骤2：添加全局变量var videoSource="";

步骤3：找到createPreviewIframeNode方法将方法代码替换为以下代码

var createPreviewIframeNode = function (editor, node) {
          var previewWrapper;
          var previewNode;
          var shimNode;
          var name = node.name;
          previewWrapper = new global$7('span', 1);
          previewWrapper.attr({
            'contentEditable': 'false',
            'style': node.attr('style'),
            'data-mce-object': name,
            'class': 'mce-preview-object mce-object-' + name
          });
          retainAttributesAndInnerHtml(editor, node, previewWrapper);
          previewNode = new global$7(name, 1);
          previewNode.attr({
            src: videoSource || node.attr('src'), // 修改
            controls: 'controls',    // 新增
            allowfullscreen: node.attr('allowfullscreen'),
            style: node.attr('style'),
            class: node.attr('class'),
            width: node.attr('width'),
            height: node.attr('height'),
            frameborder: '0'
          });
          shimNode = new global$7('span', 1);
          shimNode.attr('class', 'mce-shim');
          previewWrapper.append(previewNode);
          previewWrapper.append(shimNode);
          return previewWrapper;
        };

步骤4：找到以下代码块然后注释(大概在1150行)

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

步骤5：注释以上代码后添加新的代码判断逻辑

if(node.name === 'video' && hasLiveEmbeds(editor) && global$8.ceFalse){
                      console.log('videoSource===', videoSource)
                      videoSource = ''
                      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
                        var objE = document.createElement("div");
                    　　 objE.innerHTML = elel;
                        var dom = objE.getElementsByTagName('source')[0]
                        videoSource = dom.getAttribute('src')
                      }
                      node.replace(createPreviewIframeNode(editor, node));
                    }

以上就是img占位符的解决方法 亲试可用