媒体

media 插件允许用户在可编辑区域添加 HTML5 视频和音频元素。

它还在Insert菜单下添加Insert/edit video菜单项，并添加Insert/edit video工具栏按钮。

基础设置

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media'
});

有关使用模块打包器捆绑此插件的信息，请参阅Bundling TinyMCE - Overview。

选项

这些选项影响media插件的执行，可以禁用终端用户插入或编辑媒体项时可用的媒体对话框的部分内容。

此外，这里还有禁用跨站脚本(XSS)过滤的选项。该过滤器默认为media插件启用。

audio_template_callback

此选项允许指定返回要插入到TinyMCE中的音频媒体HTML嵌入代码的函数。

类型：Function

示例：使用audio_template_callback

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  audio_template_callback: (data) =>
    '<audio controls>\n' +
    `<source src="${data.source}"${data.sourcemime ? ` type="${data.sourcemime}"` : ''} />\n` +
    (data.altsource ? `<source src="${data.altsource}"${data.altsourcemime ? ` type="${data.altsourcemime}"` : ''} />\n` : '') +
    '</audio>'
});

iframe_template_callback

此选项允许指定返回要插入到TinyMCE中的iframe媒体HTML嵌入代码的函数。

类型：Function

示例：使用iframe_template_callback

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  iframe_template_callback: (data) =>
    `<iframe title="${data.title}" width="${data.width}" height="${data.height}" src="${data.source}"></iframe>`
});

media_alt_source

此选项允许禁用媒体对话框中的Alternative source输入字段。

类型：Boolean

默认值：true

可能的值：true，false

示例：使用media_alt_source

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  media_alt_source: false
});

media_dimensions

此选项允许禁用媒体对话框中的Dimensions输入字段。

类型：Boolean

默认值：true

可能的值：true，false

示例：使用media_dimensions

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  media_dimensions: false
});

media_filter_html

此选项允许为video/object元素禁用XSS过滤。出于安全原因，默认情况下这些元素内不能使用脚本、条件注释等。如果你想包含这些内容并有服务器端过滤器或信任你的用户，则可以禁用此功能。

类型：Boolean

默认值：true

可能的值：true，false

示例：使用media_filter_html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  media_filter_html: false
});

media_live_embeds

启用此选项后，用户将在可编辑区域内看到嵌入视频内容的实时预览，而不是占位符图像。这意味着用户可以在编辑器中播放YouTube等视频片段。

此选项默认启用，并接受用户在对话框中源字段或嵌入字段输入的URL。

类型：Boolean

默认值：true

可能的值：true，false

示例：使用media_live_embeds

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  media_live_embeds: true
});

media_poster

要删除媒体对话框中的Poster输入字段，请将此选项设置为false。

类型：Boolean

默认值：true

可能的值：true，false

示例：使用media_poster

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  media_poster: false
});

media_url_resolver

此选项允许您指定一个函数，用于将TinyMCE默认的媒体嵌入逻辑替换为您自己的自定义逻辑。

媒体URL解析函数接受三个参数：data、resolve回调和reject回调。data参数是一个包含url属性的对象。在您的自定义处理函数中，您可以以任何方式处理url，并通过调用resolve回调并传递一个将HTML设置在html属性上的对象来返回您想要嵌入的HTML，例如：resolve({ html: 'YOUR_HTML' })。

如果在处理函数中您希望回退到默认的媒体嵌入逻辑，可以调用resolve回调，并将一个html属性设置为空字符串的对象传递给它，例如：resolve({ html: '' })。

如果函数出现错误并且您想向用户显示错误信息，可以通过调用reject回调，并将一个包含用户需要看到的消息设置在msg属性上的对象传递进去，例如：reject({ msg: 'YOUR_ERROR_MESSAGE' })。所输入的消息将作为错误通知显示给用户。

类型： Function

示例：使用media_url_resolver

下面的示例只是检查URL是否包含一些特殊URL，如果是，则返回一个iframe。否则，它会调用带有空字符串的resolve回调，回退到默认的媒体嵌入逻辑。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  media_url_resolver: (data) => {
    return new Promise((resolve) => {
      if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
        const embedHtml = `<iframe src="${data.url}" width="400" height="400" ></iframe>`;
        resolve({ html: embedHtml });
      } else {
        resolve({ html: '' });
      }
    });
  }
});

video_template_callback

此选项允许您指定一个函数，该函数将返回您尝试插入到TinyMCE中的视频媒体的HTML嵌入代码。

类型： String

示例：使用video_template_callback

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  video_template_callback: (data) =>
    `<video width="${data.width}" height="${data.height}"${data.poster ? ` poster="${data.poster}"` : ''} controls="controls">\n` +
    `<source src="${data.source}"${data.sourcemime ? ` type="${data.sourcemime}"` : ''} />\n` +
    (data.altsource ? `<source src="${data.altsource}"${data.altsourcemime ? ` type="${data.altsourcemime}"` : ''} />\n` : '') +
    '</video>'
});

工具栏按钮

Media插件提供了以下工具栏按钮：

这些工具栏按钮可以通过以下方式添加到编辑器中：

• toolbar配置选项。

• quickbars_insert_toolbar配置选项。

• 自定义上下文工具栏。

菜单项

Media插件提供了以下菜单项：

这些菜单项可以通过以下方式添加到编辑器中：

• menu配置选项。

• contextmenu配置选项。

• 自定义菜单工具栏按钮。

命令

Media插件提供了以下TinyMCE命令。

tinymce.activeEditor.execCommand('mceMedia');