framededitableview.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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/ui/editable/editableview.js';
  7. export default class FramedEditableView extends EditableView {
  8. constructor( model, locale ) {
  9. super( model, locale );
  10. const bind = this.attributeBinder;
  11. // Here's the tricky part - we must return the promise from init()
  12. // because iframe loading may be asynchronous. However, we can't start
  13. // listening to 'load' in init(), because at this point the element is already in the DOM
  14. // and the 'load' event might already be fired.
  15. // So here we store both - the promise and the deferred object so we're able to resolve
  16. // the promise in _iframeLoaded.
  17. this._iframePromise = new Promise( ( resolve, reject ) => {
  18. this._iframeDeferred = { resolve, reject };
  19. } );
  20. this.template = {
  21. tag: 'iframe',
  22. attributes: {
  23. class: [ 'ck-framededitable' ],
  24. // It seems that we need to allow scripts in order to be able to listen to events.
  25. // TODO: Research that. Perhaps the src must be set?
  26. sandbox: 'allow-same-origin allow-scripts',
  27. width: bind.to( 'width' ),
  28. height: bind.to( 'height' )
  29. },
  30. on: {
  31. load: 'loaded'
  32. }
  33. };
  34. this.on( 'loaded', this._iframeLoaded, this );
  35. }
  36. init() {
  37. super.init();
  38. return this._iframePromise;
  39. }
  40. _iframeLoaded() {
  41. this.setEditableElement( this.element.contentDocument.body );
  42. this._iframeDeferred.resolve();
  43. }
  44. }