CKEditor Media嵌入

时间:2017-01-29 03:22:37

标签: javascript ruby-on-rails ckeditor ckeditor4.x oembed

我在带有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高度加载。

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

不知道它是否会对您有所帮助,但您可以在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}';
};

答案 2 :(得分:0)

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

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

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

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

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

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