Question

我在带有Media Embed插件的Rails 4应用程序上运行CKEditor 4.5，一切似乎都是正确的 - 除了某些oembed服务的嵌入代码有时被构造为嵌入式媒体不是可见。在下面的示例中，如果我进入数据库，源编辑器或检查器并手动将<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默认情况下通过一个免费的iframely api运行oembed，而且我不需要为此项目获取api密钥，因为文档似乎缺乏）。我对javascript不太满意，但是我无法在Media Embed的插件文件中找到任何内容，或者看起来像它设置高度的任何依赖项。

在CKEditor textarea中，视频显示的高度正确，但一旦发布，它将显示为0px。这只是一个CSS问题吗？

更新：我有一个iframely API密钥，但它只是改变了问题。我将media embed的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}'
);

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：Iframely支持表示问题的一部分是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}';
};

Answer 3

万一有其他人遇到此问题，我找到了解决方法。

看起来嵌入内容位于内嵌样式高度为300px的iframe内。

要解决此问题，我将div的格式设置为“ 1080p”，这为iframe的父div设置了“ embed-1080p”类。

然后我使用以下CSS选择器：

.embed-1080p > iframe {
    height: 600px !important;
}

要使该类的iframe子级的强制高度为600px

CKEditor Media嵌入

3 个答案: