Skip to content

Instantly share code, notes, and snippets.

@nleush
Last active Jul 26, 2019
Embed
What would you like to do?
CKEditor 5 script with MediaEmbed configured to use Iframely
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
var IFRAME_SRC = '//cdn.iframe.ly/api/iframe';
var API_KEY = '...';
// Your API key from https://iframely.com/profile';
var editorInstance;
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [
// Include 'MediaEmbed' plugin among others.
MediaEmbed
],
toolbar: [ 'mediaEmbed' ],
// Configure 'mediaEmbed' with Iframely previews.
mediaEmbed: {
// Previews are always enabled if there’s a provider for a URL (below regex catches all URLs)
// By default `previewsInData` are disabled, but let’s set it to `false` explicitely to be sure
previewsInData: false,
providers: [
{
// hint: this is just for previews. Get actual HTML codes by making API calls from your CMS
name: 'iframely previews',
// Match all URLs or just the ones you need:
url: /.+/,
html: match => {
const url = match[ 0 ];
var iframeUrl = IFRAME_SRC + '?app=1&api_key=' + API_KEY + '&url=' + encodeURIComponent(url);
// alternatively, use &key= instead of &api_key with the MD5 hash of your api_key
// more about it: https://iframely.com/docs/allow-origins
return (
// If you need, set maxwidth and other styles for 'iframely-embed' class - it's yours to customize
'<div class="iframely-embed">' +
'<div class="iframely-responsive">' +
`<iframe src="${ iframeUrl }" ` +
'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
'</iframe>' +
'</div>' +
'</div>'
);
}
}
]
}
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
// Store editor markup, etc.
} )
.catch( error => {
console.error( error.stack );
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment