如何在React中显示带有嵌入视频内容的HTML内容？| CK编辑器

Question

我曾经CKEditor从管理面板编写内容和嵌入视频。

现在，我想显示HTML带有嵌入视频的内容以对前端做出反应。

什么工作？

目前所有HTML内容都正确显示

<div dangerouslySetInnerHTML={{__html:DOMPurify.sanitize(HTMLDATA)}}></div>

但视频内容不显示。 HTML为了VIDEO

<figure class=\"media\"><oembed url=\"https://vimeo.com/643169446\"></oembed></figure>

如何实现这一目标？

Answer 1

我在这里的另一个问题中找到了我们问题的部分答案。

您需要更新插件的CKEditor 配置。通过设置生成的 HTML 在功能上等同于您在设计时在 CKEditor 中看到的内容。Media embedpreviewsInDatatrue

在配置中包括以下行。

mediaEmbed: { previewsInData: true }

如果这不是您想要的，那么您需要转换服务器端或客户端的输出，因为 CKEditor 生成的 HTML 只产生语义输出。CKEditor 文档建议使用包括Iframely或Embedly 在内的工具来执行此操作，但您可以以任何您希望的方式执行此操作。

此外，您必须根据README为 DOMPurify 启用 iframe 标记。

针对您的情况的修复方法是这样的：

<div dangerouslySetInnerHTML={{__html:DOMPurify.sanitize(HTMLDATA, { ADD_TAGS: ['iframe'] })}}></div>

以我的 Next v13 为例：

sanitize(html, { ADD_TAGS: ['iframe'] })

希望这可以帮助！