CKEditor媒体嵌入

我在带有Media Embedd插件的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通过一个免费的iframelyapi运行oembed，我宁愿不必为这个项目获取api密钥，因为文档似乎缺乏)。我不擅长javascript，但我在Media Embed的插件文件中找不到任何东西，也找不到它设置高度的依赖项。

在CKEditor文本区域中，视频以正确的高度显示，但一旦发布，它将以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的文档给出了的示例

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给出了的例子

CKEDITOR.config.embed_provider = '//iframe.ly/api/oembed?url={url}&callback={callback}&api_key=[your key here]';

更新2：在与iframely支持讨论后，上面只加载文本的问题是我更改的延迟加载设置。现在我回到了最初的问题，即嵌入在那里并且可以播放，但在height: 0px;上加载

更新3:Iframely support表示，部分问题是Rails的白名单剥离了内联位置属性，我将其添加到Rails的白列表中，但视频仍以0px高度加载。

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

Rails需要在白名单中添加大量属性才能实现这一点。在应用程序.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']

如果其他人遇到这个问题，我找到了一些修复方法。

看起来嵌入在一个内联样式高度为300px的iframe中。

为了解决这个问题，我将div的格式设置为"1080p"，这为iframe的父div提供了一个类"embed-1080p">

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

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

使iframe该类的子级具有600px 的强制高度

相关内容

最新更新

热门标签：