Last active
July 26, 2019 05:47
-
-
Save nleush/0f35fac13b2593a3c68d371d582e05dd to your computer and use it in GitHub Desktop.
CKEditor 5 script with MediaEmbed configured to use Iframely
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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