CKEDITOR5如何插入youtube视频

Question

我正在使用 CKEDITOR 5 对 document toolbar 做出反应。

当我插入带有媒体嵌入图标的 youtube 视频时，我可以正确地看到 youtube 视频，因为 html 包含 iframe 但是当我保存它时， html 变成这样：

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

在 ckeditor 中显示

Currently, the preview is only available for content providers for which CKEditor 5 can predict the code: YouTube, Vimeo, Dailymotion, Spotify, etc. For other providers like Twitter or Instagram the editor cannot produce an code and it does not, so far, allow retrieving this code from an external oEmbed service.

所以我应该有 iframe 标签，但它没有。

有什么想法吗？

Answer 1

我开始使用 reactjs，我正在使用 ckeditor5。目前问题依然存在。我找不到任何解决方案，但我创建了自己的解决方案，希望对您有所帮助。

//'embed' code gotten from ckeditor
 const embed =
'<figure class="media"><oembed url="https://www.youtube.com/watch?v=N1t6X4p6Q74"></oembed></figure><p>cdcdcd</p><figure class="media"><oembed url="https://www.youtube.com/watch?v=N1t6X4p6Q74"></oembed></figure>';

  const stringToHTML = function(str) {
   const domContainer = document.createElement("span");
   domContainer.innerHTML = str;
   return domContainer;
  };

  const parentEmbed = stringToHTML(embed);


 let oldIframe = parentEmbed.querySelectorAll("oembed");
 oldIframe = Array.from(oldIframe);

    for (const i in oldIframe) {
     //Get the url from oembed tag
     let url = oldIframe[i].getAttribute("url");
     //Replace 'watch?v' with 'embed/'
    url = url.replace("watch?v=", "embed/");

    //Create a iframe tag
    const newIframe = document.createElement("iframe");
    newIframe.setAttribute("width", "auto");
    newIframe.setAttribute("height", "auto");
    newIframe.setAttribute("allowFullScreen", "");
    newIframe.setAttribute("frameBorder", 0);
    if (url) {
     newIframe.setAttribute("src", url);
    }
    // replace oldIframe with newIframe
    oldIframe[i].parentNode.replaceChild(newIframe, oldIframe[i]);
   }

   const contentToRender = parentEmbed.outerHTML;

   return (
    <div
      key={contentToRender}
      dangerouslySetInnerHTML={{ __html: contentToRender }}
    />
   );

您可以优化代码，但就是这样

//ckeditor内容 Ckeditor

//恢复内容 Final data

Pd：对不起我的英语，但我正在学习。

Answer 2

我遇到了同样的问题。我从 CKEDITOR 得到了嵌入的字符串。我使用这个配置解决了这个问题：

editorConfig = {
    toolbar: [....],
    mediaEmbed: {
        previewsInData: true
    }
}

在这种情况下，CKEDITOR returns 不是嵌入字符串而是 iframe。只需保存并按原样显示即可。看 https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html#semantic-data-output-default

CKEDITOR5如何插入youtube视频

CKEDITOR5 how to insert youtube video

javascript

ckeditor