Ckeditor5 + Angular：如何显示通过编辑器添加的视频

Question

我想在我的 Angular7 应用程序中使用 CKEditor5 并遇到以下问题：

当我添加来自 YouTube 的视频时，使用编辑器配置中的“mediaEmbed”选项，编辑器返回如下 html：

    <figure class="media"><oembed url="https://www.youtube.com/watch?v=6DDqkpR65Ak"></oembed></figure>

浏览器显示错误，因为它没有有关标签oembed的信息。

文档建议使用第三方服务来转换此标签，但我认为这不是一个好主意。

我怎么解决这个问题？也许我应该创建一个与此标签同名的指令？或者也许创建一个自定义按钮来插入视频 - 这可能吗？也许有一个类似的编辑器，其中视频插入功能开箱即用，并且支持气球菜单？

Answer 1

我使用以下选项解决了它：

\n

htmlEditorConfig = {\n    mediaEmbed: {\n        previewsInData: true\n    }\n}\n

\n

然后在我的 HTML 中：

\n

<ckeditor ... [config]="htmlEditorConfig"></ckeditor>\n

\n

如果您使用 Angular，则需要清理字符串，以便 Angular 显示媒体，例如：

\n

import\xc2\xa0{ DomSanitizer } from \'@angular/platform-browser\';\n...\ncontructor(private sanitizer: DomSanitizer) {}\n...\nthis.sanitizer.bypassSecurityTrustHtml(str);\n

\n

此解决方案仅适用于某些提供商（YouTube、Vimeo...），您可以在文档中找到完整列表。

\n

================================

\n

根据文档，该选项的工作原理如下previewsInData：

\n

\n

在数据中包含预览

\n

或者，通过将 mediaEmbed.previewsInData 设置为 true，您可以将媒体嵌入功能配置为以与编辑器中的外观相同的方式输出媒体。因此，如果媒体元素是 \xe2\x80\x9cpreviewable\xe2\x80\x9d，媒体预览 (HTML) 将保存到数据库中：

\n

\n

<figure class="media">\n    <div data-oembed-url="https://media-url">\n        <iframe src="https://media-preview-url"></iframe>\n    </div>\n</figure>\n

\n

\n

目前，预览仅适用于 CKEditor 5 可以预测代码的内容提供商：YouTube、Vimeo、Dailymotion、Spotify 等。对于 Twitter 或 Instagram 等其他提供商，编辑器无法生成代码，而且到目前为止，允许从外部 oEmbed 服务检索此代码。因此，对于不可预览的媒体，它会生成默认的语义输出：

\n

\n

<figure class="media">\n    <oembed url="https://media-url"></oembed>\n</figure>\n

\n

\n

这意味着，除非您将提供商列表限制为仅可预览的提供商，否则您需要确保媒体显示在您的网站上。

\n

\n