CKEditor Media embed

Question

У меня есть CKEditor 4.5, работающий на Rails 4 с плагином Media Embed, и все кажется правильным - за исключением того, что код встраивания для некоторых oembed-сервисов иногда создается так, что встроенный носитель не отображается , В приведенном ниже примере, если я перейду в db, редактор источника или инспектор и вручную измените высоту в <div style="left: 0px; width: 100%; height: 0px; .. > на что-то ненулевое, видео отобразится правильно. Он делает это для некоторых, но не для всех, oembed услуг.

<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 запускает oembed через бесплатный iframely api по умолчанию, и я бы предпочел не иметь ключ api для этого проекта, поскольку документации, похоже, не хватает). Я не очень хорошо разбираюсь в javascript, но мне не удалось найти что-либо в файлах плагинов для Media Embed или любых зависимостей, которые выглядят так, как будто они устанавливают высоту.

В самой текстовой области CKEditor видео отображается на правильной высоте, но после его публикации оно отображается на 0px. Это просто проблема с CSS или что-то еще?

Обновление: у меня есть ключ API iframely, но это просто изменило проблему. Я изменил embed_provider линию в plugin.js медиа EMBED к

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]' 
      ), 

(очевидно, с моим фактическим ключом апи и не квадратные скобки). Но теперь некоторые вещи, которые загружали вставляемые ранее, не будут загружаться вообще, и некоторые вещи, которые не были загружены раньше, будут частично загружаться. например, видеоролики YouTube загружают местозаполнитель в редакторе и публикуют ссылку для встраивания, но не будут отображаться даже при ручном расширении до ненулевой высоты, как указано выше. В сообщениях Instagram загрузится пространство заметок для изображения, но полностью загрузите текст субтитров, где до того, как я не смог получить изображение вообще.

CKEditor's documentation дает пример

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

or

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]'; 

Update 2: После разговора с iframely поддержки, указанной выше проблемы только с загрузкой текст был ленивым d, что я изменил. Теперь я вернулся к исходной проблеме, т. Е. Встраивается там и воспроизводится, но загружается в height: 0px;

Обновление3: поддержка Iframely говорит о том, что часть проблемы была связана с белым списком Rails, который лишает свойство inline position, которое я added to Rails' whitelist, но видео по-прежнему загружается с высотой 0px.

Answer 1

Рельсы нуждались в большом количестве свойств, добавленных в белый список, чтобы заставить это работать. В 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'] 

Answer 2

Не знаю, если это поможет, но вы можете определить значение по умолчанию в 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}'; 
};