CKEditor 5 显示视频元素，但插入 div 中的纯 HTML 不显示该元素 [英] CKEditor 5 showing video element, but plain HTML inserted in a div does not show the element

问题描述

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

I am creating a lesson editor. The user can edit the content (text, videos, links, images etc) or view the final result (the rendered html).

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

The editor works fine, but when I show the rendered html the linked youtube videos are not visible.

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

This is the editor part, as you can see the video linked is visible:

这是渲染"版本；视频丢失(看起来它没有呈现 figure 标签和 oembed 标签，但为什么?):

And this is the 'rendered' version; the video is missing (it looks like it's not rendering the figure tag and the oembed tag, but why?):

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 配置，用于媒体嵌入插件.通过将 previewsInData 设置为 true，生成的 HTML 在功能上等同于您在设计时在 CKEditor 中看到的内容.

You need to update your CKEditor configuration for the Media embed plugin. By setting previewsInData to true the produced HTML is functionally equivalent to what you see in the CKEditor at design time.

在配置中加入以下行.

mediaEmbed: {previewsInData: true}

如果这不是您要找的，那么您需要将服务器端或客户端的输出转换为仅从 CKEditor 生成的 HTML 产生语义输出.CKEditor 文档建议使用包括 Iframely 或嵌入来做到这一点，但你可以做到任何随心所欲.

If this is not what you are looking for then you need to transform the output either server side or client side as the produced HTML from CKEditor only produces semantic output. The CKEditor documentation recommends using a tools including Iframely or Embedly to do this but you can do it any way you wish.

这篇关于CKEditor 5 显示视频元素，但插入 div 中的纯 HTML 不显示该元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！