tinymce:插入视频/音频后的回调(tinymce 6.5.1)

一，官方文档地址:

https://www.tiny.cloud/docs/tinymce/6/media/

二，需求及代码:

我们需要在插入视频后，设置其style宽度为100%,
注意，是style中的width，
如图:

代码：

tinymce.init({
    selector: '#tinydemo',
    plugins: "media",
    toolbar: "media",
    video_template_callback: function(data) {
        return ‘<video style="width:100%;" width="' + data.width + '" height="' + data.height 
        + '"' + (data.poster ? ' poster="' + data.poster + '"' : '')
        + ' controls="controls">\n' + '<source src="' + data.source1 + '"' 
        + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' 
        + (data.source2 ? '<source src="' + data.source2 + '"' 
        + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') 
        + '</video>';
    },
        audio_template_callback: function(data) {
            return '<audio style="width:100%" controls>' + '\n<source src="' + data.source + '"' + (data.sourcemime ? ' type="' + data.sourcemime + '"' : '') + ' />\n' + '</audio>';
        },
});

功能说明：

video_template_callback 用来自定义插入的视频代码

audio_template_callback 自定义插入音频代码

三，测试效果:

查看生成的源代码:

<p><video style="width: 100%;" poster="" controls="controls" width="100%" height="">
<source src="http://file.liuhongdi.net/video/orig/1/df87bf06ddc66eaa.mp4" type="video/mp4"></video></p>

可见已生效