此插件仅适用于付费 TinyMCE 订阅。

Enhanced Media Embed 插件是一个高级 TinyMCE 插件，它会将 URL 发送到后端服务，该服务返回可嵌入的代码片段，并将该代码添加到编辑器中。这通常采用富媒体形式，如音频、视频和社交媒体卡片。

交互示例

HTML

<textarea id="mediaembed">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2 style="text-align: center;">Welcome to the Enhanced Media Embed plugin demo!</h2>
  <p>Try pasting the sharing URL for video or audio content from a popular media provider, such as <a href="https://www.youtube.com/">YouTube</a>.</p>
  <p>The Enhanced Media Embed plugin will convert the URL into embed media.</p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#mediaembed',
  plugins: 'media mediaembed code lists',
  toolbar: 'media code',
  height: 600,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

安装

目前 Enhanced Media Embed 插件必须与 media 插件一起使用，因此：

  1. 确保已将 media 插件添加到 plugins 列表。

  2. 将 mediaembed 插件添加到 plugins 列表。

云配置示例

服务 URL 已通过 Tiny Cloud 配置。只需指定 media 和 mediaembed 插件，以及可选的 mediaembed_max_width

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

自托管配置示例

在自托管安装中，请确保使用 mediaembed_service_url 参数配置服务 URL。

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'media mediaembed',
  mediaembed_service_url: 'SERVICE_URL',
  mediaembed_max_width: 450
});

CSS

为了使可嵌入片段在您的网站上正确显示，请务必添加所需的摘要卡片 CSS。

.ephox-summary-card {
  border: 1px solid #AAA;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  padding: 10px;
  overflow: hidden;
  margin-bottom: 1em;
}

.ephox-summary-card a {
  text-decoration: none;
  color: inherit;
}

.ephox-summary-card a:visited {
  color: inherit;
}

.ephox-summary-card-title {
  font-size: 1.2em;
  display: block;
}

.ephox-summary-card-author {
  color: #999;
  display: block;
  margin-top: 0.5em;
}

.ephox-summary-card-website {
  color: #999;
  display: block;
  margin-top: 0.5em;
}

.ephox-summary-card-thumbnail {
  max-width: 180px;
  max-height: 180px;
  margin-left: 2em;
  float: right;
}

.ephox-summary-card-description {
  margin-top: 0.5em;
  display: block;
}

用法

该插件可以通过两种方式使用，一种是在空行上输入 URL 并按 Enter 键，另一种是将 URL 输入到 media 插件的对话框中。无论哪种方式，URL 都将由服务后端处理，返回的代码将嵌入到编辑器中。

选项

mediaembed_inline_styles

此选项将在渲染嵌入片段时内联所有样式，而不是使用 CSS 类。当无法向您的网站添加额外的 CSS 类时，这很有用。默认值为 false。

类型： Boolean

默认值： false

可能的值： true，false

示例：使用 mediaembed_inline_styles

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

mediaembed_service_url

此选项指定将处理您的请求并返回 Media Embed 插件使用的可嵌入片段的服务的 URL。该服务可作为 Docker 容器使用，随您的 TinyMCE Enterprise 订阅 一起提供。有关部署说明，请参阅使用 Docker 部署 TinyMCE 超链接服务端组件。此选项对于 Tiny Cloud 不是必需的。

类型： String

示例：使用 mediaembed_service_url

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'media mediaembed',
  mediaembed_service_url: 'http://example.com/mediaembed_service'
});

mediaembed_max_width

此选项指定嵌入内容的最大宽度（以像素为单位）。默认值为 650。

类型： Number

默认值： 650

示例：使用 mediaembed_max_width

tinymce.init({
  selector: 'textarea', // 根据需要修改此值
  plugins: 'media mediaembed',
  mediaembed_max_width: 450
});

下载增强型媒体嵌入插件

TinyMCE Enterprise 订阅包含拉取 Media Embed 插件的 Docker 镜像的功能。有关如何部署 Media Embed 插件的更多信息，请参阅使用 Docker 部署 TinyMCE 超链接服务端组件指南。