我在带有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&rel=0&autohide=1&showinfo=0&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帖子会为图片加载一个占位符空间,但会完全加载标题文本,之前我根本无法获取图像。
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支持交谈后,上面只加载文本的问题是我已经改变的延迟加载设置。现在我回到原来的问题,即嵌入是可以播放的,但加载height: 0px;
Update3:Iframely支持表示问题的一部分是Rails的白名单剥离内联位置属性,我added to Rails' whitelist,但视频仍在0px高度加载。
答案 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