Question

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

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

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

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

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>

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

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

1 个答案: