javascript - CKeditor5 + Angular : how to display video added via editor

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选项有效:

Including previews in data

Optionally, by setting mediaEmbed.previewsInData to true you can configure the media embed feature to output media in the same way they look in the editor. So if the media element is “previewable”, the media preview (HTML) is saved to the database:

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

Currently, the preview is only available for content providers for which CKEditor 5 can predict the code: YouTube, Vimeo, Dailymotion, Spotify, etc. For other providers like Twitter or Instagram the editor cannot produce an code and it does not, so far, allow retrieving this code from an external oEmbed service. Therefore, for non-previewable media it produces the default semantic output:

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

This means that, unless you limited the list of providers to only those which are previewable, you need to make sure that the media are displayed on your website.