【前端】vue引入tinymce富文本编辑器上传视频自动转img问题

近期遇到了一个问题，前端项目引入tinymce富文本编辑器后有一个上传视频的需求，可是放入了视频以后，在预览时发现，视频标签未能正确展示，被替换为了img标签

找了很多解决办法，都没有解决这个问题，最后找到了一个办法， 特此记录。
解决办法：

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. 找到这个方法 placeHolderConverter ,然后在这个方法中找到以下代码块然后注释

 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));
}

好了，以上就是解决办法，最后效果如下：