media 插入编辑媒体 | TinyMCE中文文档中文手册

插件 \ media 插入编辑媒体插入H5的audio和video标签
+toolbar按钮+menu项

此页更新时间：2020-12-29 11:27

此页英文文档：https://www.tiny.cloud/docs/plugins/media/

可用此插件插入音频或视频，使用的是HTML5的audio标签和video标签。这正是我从老编辑器换成TinyMCE的理由之一。对话框属性完整支持两个标签的各种属性，还支持自定义代码，也就是说，对老旧代码也可以实现支持。

tinymce.init({
    selector: '#tinydemo',
    plugins: "media",
    toolbar: "media",
});

额外设置

media_live_embeds 媒体实时预览开关

开启此选项后，用户可看到编辑区内嵌入视频的实时预览，而不是占位图。

取值： true / false

默认： true

此设置对video无效，video参考本页最下方魔改部分。

audio_template_callback 自定义插入音频代码

这也是我喜爱TinyMCE的原因，万物皆可自定义。如果不喜欢插件默认生成的代码，用此回调自定义就好了。

取值：function

tinymce.init({
    selector: '#tinydemo',
    plugins: "media",
    toolbar: "media",
    audio_template_callback: function(data) {
        return '<audio controls>' + '\n<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' + '</audio>';
    }
});

data对象的属性为对话框中所有的字段的集合。

video_template_callback 自定义插入视频代码

同上。

tinymce.init({
    selector: '#tinydemo',
    plugins: "media",
    toolbar: "media",
    video_template_callback: function(data) {
        return '<video 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>';
    }
});

media_url_resolver 自定义生成逻辑

用自定义的生成逻辑替换默认的生成逻辑。

media_url_resolver的值为一个函数，该函数接受三个参数：data、resolve回调函数、reject回调函数。

data参数为至少含有url属性的一个对象。在自定义的函数中，你可以任意处理该url，然后生成html代码，最后通过调用resolve回调函数将生成的html发送到编辑器内容区。

例如：var str='<iframe src="myurl.php" ></iframe>'; resolve({html: str });

当然，如果你还想用默认生成逻辑，传一个空字符串给它就好了。

例如：resolve({html: "" });

如果函数中出现错误，而你希望给用户提醒，可以使用reject回调。

用法如：reject({msg: '你的错误信息'});

下面这个例子检查URL是否包含特殊内容，如包含则生成自定义的iframe，否则交给插件的默认逻辑生成默认代码。

tinymce.init({
    selector: '#tinydemo',
    plugins: "media",
    toolbar: "media",
    media_url_resolver: function (data, resolve /*, reject*/) {
        if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
            var embedHtml = '';
            resolve({html: embedHtml});
        }else{
            resolve({html: ''});
        }
    }
});

media_alt_source 显示隐藏资源备用地址输入框

取值： true / false

默认： true

media_alt_source: false

media_poster 显示隐藏图片封面输入框

取值： true / false

默认： true

media_poster: false

media_dimensions 显示隐藏宽高尺寸输入框

取值： true / false

默认： true

media_dimensions: false

media_filter_html 代码过滤

开启该选项可防止用户生成的代码存在XSS的风险。不允许用户在生成元素中使用脚本及条件注释等内容。此选项默认是开启的，如无特殊需要保持默认即可。

取值： true / false

默认： true

media_filter_html: false

media_scripts 使用脚本替代

使用参数配置中的脚本生成媒体。

tinymce.init({
    selector: '#tinydemo',
    plugins: "media",
    toolbar: "media",
    media_scripts: [
        {filter: 'http://media1.tinymce.com'},
        {filter: 'http://media2.tinymce.com', width: 100, height: 200}
    ]
});