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

Question

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

当我从YouTube添加视频时，使用编辑器配置中的'mediaEmbed'选项，编辑器将返回html，如下所示：

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

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

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

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

Answer 1

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

htmlEditorConfig = {
    mediaEmbed: {
        previewsInData: true
    }
}

然后在我的HTML中：

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

如果使用的是Angular，则需要清理字符串以使Angular显示媒体，并带有类似以下内容：

import { DomSanitizer } from '@angular/platform-browser';
...
contructor(private sanitizer: DomSanitizer) {}
...
this.sanitizer.bypassSecurityTrustHtml(str);

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

==============================>

根据docs，这是previewsInData选项的工作方式：

[包括数据预览

[可选，通过将mediaEmbed.previewsInData设置为true，您可以配置媒体嵌入功能，以与在编辑器中相同的方式输出媒体。因此，如果媒体元素是“可预览的”，则媒体预览（HTML）将保存到数据库：

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

[当前，预览仅可用于CKEditor 5可以预测代码的内容提供者：YouTube，Vimeo，Dailymotion，Spotify等。对于其他提供者，例如Twitter或Instagram，编辑器无法生成代码，因此无法生成代码，因此到目前为止，允许从外部嵌入式服务检索此代码。因此，对于不可预览的媒体，它将产生默认的语义输出：

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

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