CKEditor 5 视频嵌入在演示页面上不显示

Question

我知道这个问题已经被问过很多次了，但我打开这个讨论是为了解决我的问题并总结我们对这个话题的所有了解，以帮助未来的人们。

那么，我们走吧。 我们要上传视频（例如来自 YouTube）。我们可以粘贴视频网址或使用 MediaEmbed 按钮。

我们有两种可能。

我们可以在 editorConfig 中设置或不设置

mediaEmbed: { previewsInData: true }

没有previewsInData: true，我们会得到这样的东西：

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

而不是previewsInData: true，我们会得到类似的东西

<figure class="media">
  <div data-oembed-url="https://www.youtube.com/watch?v=vsl3gBVO2k4&amp;ab_channel=H%C3%A9lderPalma">
    <div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">
      <iframe src="https://www.youtube.com/embed/vsl3gBVO2k4" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">
      </iframe>
    </div>
  </div>
</figure>

在这两种情况下，我都能在我的 CKEditor 中看到 youtube 视频的预览。 但是当我保存编辑器的内容并将其显示在我的演示页面中时，视频不会显示。

阅读论坛上的其他讨论，我无法弄清楚这是否只是我的问题。许多关于在 editorConfig 中添加 previewsInData: true 的解决方案，但对我来说绝对没有任何变化。

我认为figure 和oembed div 标签对CKEditor 显示视频预览很有用。我们知道这个预览就像一张图片，你不能播放视频，你不能在新页面中打开等等。这没关系，但我想在我的演示页面中看到视频。

那么，问题出在哪里？

1. 要在演示页面上进行更改以显示视频吗？
2. 是否应该搜索 figure 标签并将其替换为 iframe 服务器端？
3. 有什么想法吗？

我希望我们能找到永久解决这个问题的办法。

Answer 1

您确实应该使用“前端”来显示 oembed 标签，就像它在手册中所说的那样：https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html#displaying-embedded-media-on-your-website

你可以使用这个来提供你自己的媒体提供者：

        ClassicEditor
        .create( editorElement, {
            plugins: [ MediaEmbed, ... ],
            mediaEmbed: {
                extraProviders: [
                    {
                         name: 'extraProvider',
                         url: /^example\.com\/media\/(\w+)/,
                         html: match => '...'
                    },
                    ...
                ]
            }
        } )
    .then( ... )
    .catch( ... );

html 可能是这样的：

...
html: match =>
    '<div style="position:relative; padding-bottom:100%; height:0">' +
        '<iframe src="..." frameborder="0" ' +
            'style="position:absolute; width:100%; height:100%; top:0; left:0">' +
        '</iframe>' +
    '</div>'

您可以在此处的 de docs 中找到更多信息：

https://ckeditor.com/docs/ckeditor5/latest/api/module_media-embed_mediaembed-MediaEmbedProvider.html

您也可以自己做这样的事情，避免使用外部 oembed 提供商：

window.addEventListener('load', function(){
    document.querySelectorAll('oembed[url]').forEach( element => {
        // get just the code for this youtube video from the url
        let vCode = element.attributes.url.value.split('?v=')[1];
        // paste some BS5 embed code in place of the Figure tag
    element.parentElement.outerHTML= `
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/${vCode}?rel=0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>`;
    });
})

您当然必须为所有不同版本的嵌入内容升级脚本，此示例仅适用于 youtube。您必须分析来自 oembed 标记的 URL 以检查嵌入的内容，以便为每个变体添加正确的代码。