1

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

所以，我们走吧。我们要上传视频（例如来自 YouTube）。我们可以粘贴视频 url 或使用 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 视频的预览。但是当我保存编辑器的内容并将其显示在我的演示页面中时，视频不会显示。

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

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

那么，问题出在哪里？

  1. 演示页面上是否需要更改以显示视频？
  2. 我应该搜索图形标签并将其替换为 iframe 服务器端吗？
  3. 有任何想法吗？

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

4

1 回答 1

0

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

您可以使用以下方法提供自己的媒体提供者：

        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 以检查嵌入的内容，以便为每个变体添加正确的代码。

于 2022-02-13T15:38:41.043 回答