Skip to content

Instantly share code, notes, and snippets.

@oleq
Last active February 12, 2019 13:24
Show Gist options
  • Save oleq/abb6dd147276ba4b5099cd03bb688463 to your computer and use it in GitHub Desktop.
Save oleq/abb6dd147276ba4b5099cd03bb688463 to your computer and use it in GitHub Desktop.
CKEditor 5 IframeView usage example
<div id="editor">
<p>A paragraph.</p>
</div>
<style>
.ck .ck-balloon-panel iframe {
width: 400px;
height: 250px;
}
</style>
/**
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
/* globals window, document, console:false */
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
import IframeView from '../../../src/iframe/iframeview';
import BalloonPanelView from '../../../src/panel/balloon/balloonpanelview';
import ContextualBalloon from '../../../src/panel/balloon/contextualballoon';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
class IframeViewDemo extends Plugin {
constructor( editor ) {
super( editor );
this.iframe = new IframeView();
this.contextualBalloon = editor.plugins.get( ContextualBalloon );
}
init() {
const editor = this.editor;
const editingView = editor.editing.view;
const defaultPositions = BalloonPanelView.defaultPositions;
editor.on( 'ready', () => {
this.contextualBalloon.add( {
view: this.iframe,
position: {
// Attach the balloon to the first paragraph in the content.
target: editingView.domConverter.viewToDom( editingView.document.getRoot().getChild( 0 ) ),
position: [
// The balloon will always be south of the target.
defaultPositions.northArrowSouth
]
}
} );
this.iframe.element.src = 'https://ckeditor.com';
this.iframe.on( 'loaded', () => {
console.log( 'The iframe has loaded', this.iframe.element.contentWindow );
} );
} );
}
}
// Finally the editor.
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ ArticlePluginSet, IframeViewDemo ],
toolbar: [ 'bold', 'link' ],
balloonToolbar: [ 'bold', 'link' ]
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment