CKEditor媒體嵌入

我有CKEditor 4.5在Media Embed插件上運行Rails 4應用程序，並且一切看起來都是正確的 - 除了某些嵌入式服務的嵌入代碼有時被構建以便嵌入式媒體不可見。在下面的例子中，如果我進入數據庫，源代碼編輯器或檢查器並手動將<div style="left: 0px; width: 100%; height: 0px; .. >中的高度更改爲非零值，視頻將正確顯示。它爲一些但不是全部的oembed服務做到了這一點。CKEditor媒體嵌入

<div data-oembed-url="https://www.youtube.com/watch?v=pLKeZukedZo"> 
<div> 
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/pLKeZukedZo?wmode=transparent&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;enablejsapi=1" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;" tabindex="-1"></iframe></div> 
</div> 
</div>

在配置文件或插件文件中是否有某處更改高度或至少設置了最小高度？或者這是一個iframely問題（CKEditor默認通過一個免費的iframely api來運行oembed，並且我寧願不必爲這個項目獲得api鍵，因爲文檔似乎缺乏）。我對JavaScript並不擅長，但我一直無法在Media Embed或其任何看起來像設置高度的依賴項的插件文件中找到任何內容。

在CKEditor textarea本身，視頻顯示在正確的高度，但一旦發佈，它將顯示在0px。這只是一個CSS問題或什麼？

更新：我有一個iframely API密鑰，但它只是改變了問題。我改變了媒體嵌入的plugin.js的embed_provider線

CKEDITOR.tools.extend(widgetDefinition, { 
      // Use a dialog exposed by the embedbase plugin. 
      dialog: 'embedBase', 
      button: editor.lang.embedbase.button, 
      allowedContent: 'div[!data-oembed-url]', 
      requiredContent: 'div[data-oembed-url]', 
      providerUrl: new CKEDITOR.template(
       '//iframe.ly/api/oembed?url={url}&callback={callback}&api_key=[my api key]' 
      ),

（很明顯，我的實際API密鑰和無方括號）。但是現在一些加載嵌入的東西根本不會加載，而一些以前未加載的東西會部分加載。例如，YouTube視頻會在編輯器中加載佔位符併發布嵌入鏈接，但即使手動展開爲非零高度，也不會顯示。 Instagram的帖子將爲圖片加載一個佔位符空間，但完全加載標題文本，之前根本無法獲取圖片。

CKEditor's documentation給出的例子

widgetDefinition.providerUrl = new CKEDITOR.template(
    '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}' 
);

config.embed_provider = '//example.com/api/oembed-proxy?resource-url={url}&callback={callback}';

而Iframely's給出的例子

CKEDITOR.config.embed_provider = '//iframe.ly/api/oembed?url={url}&callback={callback}&api_key=[your key here]';

更新2：iframely支持，僅裝載了上述問題交談後文字是懶惰的d設定我改變了。現在我回到原來的問題，即嵌入是存在的，可玩的，但在負載height: 0px;

UPDATE3：Iframely支持說，這個問題的一部分是Rails的白名單中剝離出來的線位置屬性，我added to Rails' whitelist，但視頻仍在0px高度加載。

來源

2017-01-29 Jim Hogan

Rails需要將很多屬性添加到白名單才能使其工作。在application.rb中：

default_tags = Loofah::HTML5::WhiteList::ALLOWED_CSS_PROPERTIES.add('position').add('padding-bottom').add('max-height').add('max-width').add('left').add('top') 
config.action_view.sanitized_allowed_attributes = ['href', 'src', 'alt', 'data-oembed-url', 'style', 'allowfullscreen', 'frameborder', 'tabindex', 'id', 'text', 'class', 'data-iframely-url']

來源

2017-02-03 14:01:57

不知道它會幫助你，但你可以在config.js定義默認值：

CKEDITOR.editorConfig = function(config) { 
    // Define changes to default configuration here. For example: 
    config.embed_provider = '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}'; 
};

來源

2017-10-09 22:18:40

CKEditor媒體嵌入

回答

相關問題