media 插入编辑媒体

2023-09-03 00:20| 来源: 网络整理| 查看: 265

此页更新时间：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 '' + '\n\n' + ''; } });

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

video_template_callback 自定义插入视频代码

同上。

tinymce.init({ selector: '#tinydemo', plugins: "media", toolbar: "media", video_template_callback: function(data) { return '\n' + '\n' + (data.source2 ? '\n' : '') + ''; } }); media_url_resolver 自定义生成逻辑

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

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

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

例如：var str=''; 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} ] }); 魔改media插件

应广大读者要求，要实现video在编辑器内显示视频而不是占位符。

自带API无法实现，只能修改插件源码来实现，这里于是这里提供一份魔改后的插件，魔改部分有注释。

魔改media插件适用于5.2.0之前的tiny

魔改media插件适用于5.2.0的tiny

魔改media插件适用于5.6.0的tiny

如果要显示播放工具，只需将魔改中注释的那行取消注释即可。

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

【本文地址】

公司简介

联系我们