CKEditorメディア埋め込み

Question

CKEditor 4.5をRails 4アプリケーションでMedia Embedプラグインを使用して実行していますが、すべてのものが正しいように見えますが、組み込みメディアが表示されないように。次の例では、db、ソースエディタ、またはインスペクタに入り、手動で<div style="left: 0px; width: 100%; height: 0px; .. >の高さを何かゼロ以外に変更すると、ビデオが正しく表示されます。すべてのサービスではなく、一部のサービスでこれを行います。

<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> 

configまたはpluginファイルのどこかに高さを変更するか、少なくとも最低高さを設定していますか？あるいは、これはむしろ問題ではない（CKEditorはデフォルトで無料のiframeを介してoembedを実行し、ドキュメントが不足していると思われるため、このプロジェクトのapiキーを取得する必要はない）。私はjavascriptですばらしいわけではありませんが、Media Embedのプラグインファイルや、その高さを設定するような依存関係を見つけることができませんでした。

CKEditorテキストエリア自体では、ビデオは正しい高さで表示されますが、公開されると0pxで表示されます。これは単なるCSSの問題なのでしょうか？

更新：私はiframely APIキーを持っていますが、問題を変更したばかりです。私は（明らかに私の実際のAPIキーと無角括弧で）

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

にメディアを埋め込むのplugin.jsでembed_providerラインを変更しました。しかし、以前に埋め込みをロードしていたものはまったく読み込まれず、前に読み込まれていなかったものが部分的に読み込まれるようになりました。たとえば、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]'; 

アップデート2：iframelyサポートのみ負荷を有するこのような問題と話す後テキストは怠け者だった私が変えた設定。今、私は元の問題に戻っています。埋め込みはそこにあり再生可能ですが、ロードされます。height: 0px;

Update3：問題のその部分は、Railsのホワイトリストがインライン位置プロパティadded to Rails' whitelist、ビデオはまだ0pxの高さで読み込まれています。

Answer 1

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

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