CKEDITOR5 如何插入 youtube 视频答案

【问题标题】：CKEDITOR5 how to insert youtube videoCKEDITOR5 如何插入 youtube 视频
【发布时间】：2019-12-20 18:09:21
【问题描述】：

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

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

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

在ckeditor中它说

目前，预览仅适用于 CKEditor 5 可以预测代码的内容提供商：YouTube、Vimeo、Dailymotion、Spotify 等。对于 Twitter 或 Instagram 等其他提供商，编辑器无法生成代码，它也不会，到目前为止，允许从外部 oEmbed 服务中检索此代码。

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

有什么想法吗？

【问题讨论】：

标签： javascript ckeditor

【解决方案1】：

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

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

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

【讨论】：

很好的答案！谢谢。

【解决方案2】：

我开始使用 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：对不起我的英语，但我正在学习。

【讨论】：