Configure Iframely for CKEditor

CKEditor has two available plugins that rely on Iframely oEmbed API: Media Embed and Semantic Media Embed.

See Media Embed's demo and its own documentation.

The plugins use Iframely's demo endpoint out of the box, and you need to change it to the address with your API key.

Connect CKEditor to your Iframely account

The option you need to change is embed_provider. See details in CKEditor docs.

Do it the following way:

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

You can add &iframe=1 and any other optional query-string parameters in embed_provider endpoint.

Known issue

CKEditor has built-in changes and history manager. It needs a better control of the DOM as you edit your article. Hence CKEditor does not execute the inline scripts that go with the HTML embeds you add.

It will cause text-only previews for some popular embeds like Facebook, Twitter, Instagram, Imgur, GitHub Gists, Iframely cards and lazy-loaded iFrames. All iFrame-based embeds will be previewed alright.

This limitation causes inconveniences only in editor's preview - the actual embed codes will be reinstated and work great after you publish your article.

However, if that is the issue for your users, you can add &iframe=1&omit_script=1 to your embed_provider configuration and load embed.js yourself.

Make sure to load embed.js on the article's public page as well. But please do it only if required: when there are embeds in your article. See this gist.

Alternatively, simply use &omit_css and style the placeholder divs in the editor yourself.