CKEditor 5 显示视频元素，但插入 div 中的纯 HTML 不显示该元素

Question

我正在创建一个课程编辑器。用户可以编辑内容（文本、视频、链接、图像等）或查看最终结果（渲染的 html）。

\n\n

编辑器工作正常，但是当我显示渲染的 html 时，链接的 YouTube 视频不可见。

\n\n

这是编辑器部分，您可以看到链接的视频可见：

\n\n

\n\n

这是“渲染”版本；视频丢失（看起来它没有渲染标签figure和oembed标签，但为什么？）：

\n\n

\n\n

html 是：

\n\n

<h2>This is the header of this section</h2>\n<figure class="media">\n<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9"></oembed>\n</figure>\n\n<p>Please let the student introduce himself.</p><blockquote><p>&nbsp; \xe2\x80\x98I was in no mood for talk and I was unpleasantly surprised to find Judy Poovey brushing her teeth at the sink. [\xe2\x80\xa6]<br>\xe2\x80\x98Hi, Richard,\xe2\x80\x99 she said, and spit out a mouthful of toothpaste. She was wearing cut-off jeans that had bizarre, frantic designs drawn on them in Magic Marker and a spandex top which revealed her intensely aerobicized midriff.<br>\xe2\x80\x98Hello,\xe2\x80\x99 I said, setting to work on my tie.<br>\xe2\x80\x98You look cute today.\xe2\x80\x99<br>\xe2\x80\x98Thanks.\xe2\x80\x99<br>\xe2\x80\x98Got a date?\xe2\x80\x99<br>I looked away from the mirror, at her. \xe2\x80\x98What?\xe2\x80\x99<br>\xe2\x80\x98Where you going?\xe2\x80\x99<br>By now I was used to her interrogations.\xe2\x80\x99 (pp. 51-52)</p></blockquote>\n\n<figure class="media">\n<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9">\n</oembed>\n</figure>\n

\n

Answer 1

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

在配置中包括以下行。

mediaEmbed: {previewsInData: true}

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