8
0

framededitableuiiframeview.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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 IframeView from '/ckeditor5/ui/iframe/iframeview.js';
  7. import FramedEditableUIView from './framededitableuiview.js';
  8. /**
  9. * The basic implementation of an {@link ui.iframe.IframeView IframeView}-based
  10. * {@link ui.editableUI.EditableUIView}.
  11. *
  12. * @memberOf ui.editableUI.iframe
  13. * @extends ui.iframe.IframeView
  14. */
  15. export default class FramedEditableUIIframeView extends IframeView {
  16. /**
  17. * Creates a new instance of the {@link ui.iframe.IframeView IframeView}–based
  18. * {@link ui.editableUI.EditableUIView EditableUIView}.
  19. *
  20. * @param {utils.Observable} [model] (View)Model of this View.
  21. * @param {utils.Locale} [locale] The {@link ckeditor5.Editor#locale editor's locale} instance.
  22. */
  23. constructor( model, locale ) {
  24. super( model, locale );
  25. const bind = this.attributeBinder;
  26. this.template.attributes.class.push( 'ck-editor__editable-iframe' );
  27. this.template.attributes.style = [
  28. 'width:',
  29. bind.to( 'width', ( w ) => `${w}px` ),
  30. ';',
  31. 'height:',
  32. bind.to( 'height', ( h ) => `${h}px` )
  33. ];
  34. this.on( 'loaded', this._iframeLoaded, this );
  35. /**
  36. * A view which represents the editable `<body>` element within the iframe.
  37. *
  38. * @private
  39. * @member {FramedEditableUIView} ui.editableUI.iframe#_innerView
  40. */
  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._innerView.editableElement;
  48. }
  49. /**
  50. * Destroys the View instance and child {@link _innerView}.
  51. */
  52. destroy() {
  53. super.destroy();
  54. return this._innerView.destroy();
  55. }
  56. /**
  57. * When the iframe is loaded, it creates a child view out of <body> element
  58. * and initializes it. Element of this view is exposed through {@link editableElement}.
  59. *
  60. * @protected
  61. */
  62. _iframeLoaded() {
  63. this._innerView = new FramedEditableUIView(
  64. this.model,
  65. this.locale,
  66. this.element.contentDocument.body
  67. );
  68. this._innerView.init();
  69. this._iframeDeferred.resolve();
  70. }
  71. }
  72. /**
  73. * The view model interface for FramedEditableUIView.
  74. *
  75. * @memberOf ui.editableUI.iframe
  76. * @interface FramedEditableUIViewModel
  77. * @mixes utils.ObservableMixin
  78. */
  79. /**
  80. * The width of the iframe.
  81. *
  82. * @member {Number} ui.editableUI.iframe.FramedEditableUIViewModel#width
  83. */
  84. /**
  85. * The height of the iframe.
  86. *
  87. * @member {Number} ui.editableUI.iframe.FramedEditableUIViewModel#height
  88. */