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

此页更新时间:2019-04-06 22:37

此页英文文档: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

media_live_embeds: true

audio_template_callback 自定义插入音频代码

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

取值:function

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

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

下一节:nonbreaking 插入不间断空格