framededitableview.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. 'use strict';
  6. import EditableView from '/ckeditor5/core/editable/editableview.js';
  7. export default class FramedEditableView extends EditableView {
  8. constructor( model ) {
  9. super( model );
  10. // Here's the tricky part - we must return the promise from init()
  11. // because iframe loading may be asynchronous. However, we can't start
  12. // listening to 'load' in init(), because at this point the element is already in the DOM
  13. // and the 'load' event might already be fired.
  14. // So here we store both - the promise and the deferred object so we're able to resolve
  15. // the promise in _iframeLoaded.
  16. this._iframePromise = new Promise( ( resolve, reject ) => {
  17. this._iframeDeferred = { resolve, reject };
  18. } );
  19. this.template = {
  20. tag: 'iframe',
  21. attributes: {
  22. class: [ 'ck-framededitable' ],
  23. // It seems that we need to allow scripts in order to be able to listen to events.
  24. // TODO: Research that. Perhaps the src must be set?
  25. sandbox: 'allow-same-origin allow-scripts',
  26. width: this.bindToAttribute( 'width' ),
  27. height: this.bindToAttribute( 'height' )
  28. },
  29. on: {
  30. load: 'loaded'
  31. }
  32. };
  33. this.on( 'loaded', this._iframeLoaded, this );
  34. }
  35. init() {
  36. super.init();
  37. return this._iframePromise;
  38. }
  39. _iframeLoaded() {
  40. this.setEditableElement( this.element.contentDocument.body );
  41. this._iframeDeferred.resolve();
  42. }
  43. }