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

【问题标题】：CKEditor 5 showing video element, but plain HTML inserted in a div does not show the elementCKEditor 5 显示视频元素，但插入 div 的纯 HTML 不显示该元素
【发布时间】：2019-08-02 05:00:56
【问题描述】：

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

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

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

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

html 是：

<h2>This is the header of this section</h2>
<figure class="media">
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9"></oembed>
</figure>

<p>Please let the student introduce himself.</p><blockquote><p>&nbsp; ‘I was in no mood for talk and I was unpleasantly surprised to find Judy Poovey brushing her teeth at the sink. […]<br>‘Hi, Richard,’ 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>‘Hello,’ I said, setting to work on my tie.<br>‘You look cute today.’<br>‘Thanks.’<br>‘Got a date?’<br>I looked away from the mirror, at her. ‘What?’<br>‘Where you going?’<br>By now I was used to her interrogations.’ (pp. 51-52)</p></blockquote>

<figure class="media">
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9">
</oembed>
</figure>

【问题讨论】：

阅读此ckeditor.com/docs/ckeditor5/latest/features/…

标签： javascript html reactjs ckeditor5

【解决方案1】：

您需要将CKEditor configuration 更新为Media embed plugin。通过将previewsInData 设置为true，生成的HTML 在功能上等同于您在设计时在CKEditor 中看到的内容。

在configuration 中包含以下行。

mediaEmbed: {previewsInData: true}

如果这不是您要查找的内容，那么您需要将服务器端或客户端的输出转换为仅从 CKEditor produces semantic output 生成的 HTML。 CKEditor 文档建议使用包括Iframely 或Embedly 在内的工具来执行此操作，但您可以按照您的意愿进行操作。

【讨论】：