TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频,被替换成img标签
以前用百度的UE,代码陈旧,有很多定制化的需求改起来很费劲,后来发现研究TinyMCE编辑器,发现更成熟,所以转向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">


然后找官方文档,发现有个参数: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=""
效果图如下:(默认还有边框,我不喜欢就给去掉了)


浙公网安备 33010602011771号