CKEditor 5 IframeView usage example

example.html

<div id="editor">
	<p>A paragraph.</p>
</div>

<style>
	.ck .ck-balloon-panel iframe {
		width: 400px;
		height: 250px;
	}
</style>

example.js

/**
 * @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 );
	} );