8
0

framededitableuiiframeview.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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 EditableUIView from '/ckeditor5/ui/editableui/editableuiview.js';
  7. import View from '/ckeditor5/ui/view.js';
  8. import FramedEditableUIView from './framededitableuiview.js';
  9. export default class FramedEditableUIIframeView extends View {
  10. constructor( model, locale ) {
  11. super( model, locale );
  12. const bind = this.attributeBinder;
  13. // Here's the tricky part - we must return the promise from init()
  14. // because iframe loading may be asynchronous. However, we can't start
  15. // listening to 'load' in init(), because at this point the element is already in the DOM
  16. // and the 'load' event might already be fired.
  17. // So here we store both - the promise and the deferred object so we're able to resolve
  18. // the promise in _iframeLoaded.
  19. this._iframePromise = new Promise( ( resolve, reject ) => {
  20. this._iframeDeferred = { resolve, reject };
  21. } );
  22. this.template = {
  23. tag: 'iframe',
  24. attributes: {
  25. class: [ 'ck-framededitable ck-reset-all' ],
  26. // It seems that we need to allow scripts in order to be able to listen to events.
  27. // TODO: Research that. Perhaps the src must be set?
  28. sandbox: 'allow-same-origin allow-scripts',
  29. width: bind.to( 'width' ),
  30. height: bind.to( 'height' )
  31. },
  32. on: {
  33. load: 'loaded'
  34. }
  35. };
  36. this.on( 'loaded', this._iframeLoaded, this );
  37. }
  38. init() {
  39. super.init();
  40. return this._iframePromise;
  41. }
  42. /**
  43. * This getter exposes the {@link ui.editable.EditableUIView#editableElement}. It points to the
  44. * `<body>` inside the `<iframe>` document, which is provided by `FramedEditableUIView`.
  45. */
  46. get editableElement() {
  47. return this.editableUIView.editableElement;
  48. }
  49. _iframeLoaded() {
  50. this.editableUIView = new FramedEditableUIView(
  51. this.model,
  52. this.locale,
  53. this.element.contentDocument.body
  54. );
  55. this.editableUIView.init();
  56. this._iframeDeferred.resolve();
  57. }
  58. destroy() {
  59. super.destroy();
  60. return this.editableUIView.destroy();
  61. }
  62. }