自动嵌入

在空行中粘贴 YouTube、Vimeo 或其他视频链接，它就会在文档中变成一个 16:9 的视频播放器。插件根据链接的地址格式识别链接；它不调用 oEmbed 或任何其他 Web 服务。

在单独一行粘贴 YouTube 链接后的编辑器：Watch the short film 这一行下方，一个播放 Big Buck Bunny 的 YouTube 播放器占满编辑器的宽度 — 把 `https://www.youtube.com/watch?v=aqz-KE-bpKQ` 粘贴到空段落中的结果。

启用

该功能由 autoembed.js 插件提供（也包含在 plugins/all_plugins.js 中）。它没有按钮：加载插件即可启用。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/autoembed.js"></script>

<div id="div_editor1"><p>Watch the short film:</p><p><br></p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertlink,insertvideo}|{undo,redo}"
});
</script>

加载了 all_plugins.js 的页面已经启用了它；如果想让粘贴的视频链接保持为链接，请设置 autoEmbedEnabled: false。

支持的链接

服务商	粘贴的链接	播放器地址
YouTube	`youtube.com/watch?v=ID`、`youtu.be/ID`、`youtube.com/shorts/ID`	`https://www.youtube.com/embed/ID`
Vimeo	`vimeo.com/123456789`、`player.vimeo.com/video/123456789`	`https://player.vimeo.com/video/ID`
Dailymotion	`dailymotion.com/video/ID`、`dai.ly/ID`	`https://www.dailymotion.com/embed/video/ID`
Loom	`loom.com/share/ID`（32 个十六进制字符）	`https://www.loom.com/embed/ID`
CodePen	`codepen.io/USER/pen/ID`	`https://codepen.io/USER/embed/ID?default-tab=result`
TED	`ted.com/talks/NAME`	`https://embed.ted.com/talks/NAME`
Youku	`v.youku.com/v_show/id_ID.html`	`https://player.youku.com/embed/ID`
Coub	`coub.com/view/ID`	`https://coub.com/embed/ID`

每个服务商的 ID 都会按严格的格式进行检查，播放器地址由固定模板构造，因此粘贴的文本永远不会原样成为 iframe 的地址。来自其他网站的链接（包括推文）仍然是普通链接。

选项

选项	默认值	作用
`autoEmbedEnabled`	`true`	开启或关闭粘贴时的嵌入。无论哪种设置，`editor.embedUrl()` 都可以使用。
`autoEmbedResolver`	`null`	用于您自己的服务商的 `function (url)`。返回以 `https://` 开头的播放器地址字符串；返回其他任何值则保持链接不变。只有内置列表不认识的链接才会询问它。

var editor1 = new RichTextEditor("#div_editor1", {
  autoEmbedResolver: function (url) {
    var m = /^https:\/\/media\.example\.com\/v\/([a-z0-9]+)$/i.exec(url);
    return m ? "https://media.example.com/embed/" + m[1] : null;
  }
});

使用这个解析器时，粘贴 https://media.example.com/v/abc123 生成了指向 https://media.example.com/embed/abc123 的播放器。以 http:// 粘贴同一个链接则生成了一个链接：解析器没有匹配它。

使用方法

把链接粘贴到空行中，或者粘贴到一个不会再有其他内容的行上。该段落会被替换为播放器以及其后的一个空段落，光标位于空段落中。
在句子中间粘贴的链接仍然是链接：See this: https://youtu.be/… 变成了 See this: <a href="https://youtu.be/…">…</a>。
只有以纯文本形式粘贴单个地址才会生效。包含空格的文本，或者粘贴覆盖选区时，会交给编辑器的常规粘贴处理。
通过脚本：editor1.embedUrl(url) 在光标处插入播放器并返回 true；对于不认识的地址则返回 false。editor1.embedUrl("https://vimeo.com/76979871") 返回了 true。
如需带尺寸选项的对话框，请使用编辑器的 Insert Video 按钮（insertvideo）。

注意事项

保存的标记是一个包含播放器的包装元素：

<div class="rte-embed" contenteditable="false" data-embed="https://www.youtube.com/embed/aqz-KE-bpKQ" style="display:block; margin:12px 0; max-width:720px"><div class="rte-embed-frame" style="position:relative; width:100%; height:0; padding-bottom:56.25%; overflow:hidden; border-radius:10px; background:#000"><iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ" loading="lazy" allowfullscreen="" referrerpolicy="strict-origin-when-cross-origin" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="position:absolute; top:0; left:0; width:100%; height:100%; border:0" sandbox="allow-scripts allow-same-origin allow-presentation"></iframe></div></div>

尺寸写在内联样式中，因此播放器在您的页面上无需额外的 CSS 就能保持 16:9 的形状。sandbox 属性是编辑器添加的。

生成播放器不需要网络：离线时粘贴仍然生成了同样的标记。视频本身会在有人观看时从服务商加载，这也意味着服务商能看到观看者的访问。
您的净化程序必须允许带有这些属性的 iframe，并且应该只允许上面列出的播放器主机。内容安全策略需要在 frame-src 中包含这些主机。

相关内容：媒体嵌入演示、嵌入视频演示、书签卡片。