Javascript Ckeditor5+；角度：如何显示通过编辑器添加的视频

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

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

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

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

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

我怎样才能解决这个问题？ 也许我应该创建一个与此标记同名的指令？ 或者创建一个自定义按钮来插入视频-可能吗？

---

也许有一个类似的编辑器，其中视频插入是开箱即用的，并且支持引出序号菜单？

我使用以下选项解决了这个问题：

htmlEditorConfig = {
    mediaEmbed: {
        previewsInData: true
    }
}

然后在我的HTML中：

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

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

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

根据，以下是

previewsInData

选项的工作原理：

包括数据中的预览

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

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

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

---

你解决了吗？@YamenAshraf不，我决定不使用这个编辑器。我认为这是最简单的解决方案。非常感谢。

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

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

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