近期遇到了一个问题，前端项目引入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.valuevar objE = document.createElement("div");objE.innerHTML = elel;var dom = objE.getElementsByTagName('source')[0]videoSource = dom.getAttribute('src')}node.replace(createPreviewIframeNode(editor, node));
}
好了，以上就是解决办法，最后效果如下：
