tinymce踩坑，解决上传视频被image占位、视频不能编辑以

vue使用tinymce上传视频后占位符显示img、视频不能编辑也不能删除问题解决

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

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

var createPreviewIframeNode = function (editor, node) {
      var previewWrapper;
      var previewNode;
      var shimNode;
      var name = node.name;
      previewWrapper = new global$8('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$8(name, 1);
      previewNode.attr({
        src: 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$8('span', 1);
      shimNode.attr('class', 'mce-shim');
      previewWrapper.append(previewNode);
      previewWrapper.append(shimNode);
      return previewWrapper;
    };

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

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

步骤5：注释以上代码后修改判断逻辑

          if ((node.name === 'iframe' || node.name === 'video') && Settings.hasLiveEmbeds(editor) && global$1.ceFalse) {
            if (!isWithinEphoxEmbed(node)) {
              node.replace(createPreviewIframeNode(editor, node));
            }
          } else {
            if (!isWithinEphoxEmbed(node)) {
              node.replace(createPlaceholderNode(editor, node));
            }
          }

以上就是解决视频占位和不能编辑以及删除问题