editableuiview.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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 View from '../view.js';
  7. import CKEditorError from '../../utils/ckeditorerror.js';
  8. /**
  9. * @memberOf ui.editableUI
  10. * @extends ui.View
  11. */
  12. export default class EditableUIView extends View {
  13. /**
  14. * Creates an instance of the EditableUIView class.
  15. *
  16. * @method constructor
  17. * @param {ui.Model} model (View)Model of this view.
  18. * @param {utils.Locale} [locale] The {@link ckeditor5.Editor#locale editor's locale} instance.
  19. * @param {HTMLElement} [editableElement] The editable element. If not specified the editable UI view
  20. * should create it. Otherwise, the existing element should be used.
  21. */
  22. /**
  23. * The element which is the main editable element (usually the one with `contentEditable="true"`).
  24. *
  25. * @readonly
  26. * @member {HTMLElement} ui.editable.EditableUIView#editableElement
  27. */
  28. /**
  29. * Sets the {@link #editableElement} property and applies necessary bindings to it.
  30. *
  31. * @param {HTMLElement} editableElement
  32. */
  33. setEditableElement( editableElement ) {
  34. const bind = this.attributeBinder;
  35. if ( this.editableElement ) {
  36. throw new CKEditorError(
  37. 'editableview-cannot-override-editableelement: The editableElement cannot be overriden.'
  38. );
  39. }
  40. this.editableElement = editableElement;
  41. this.applyTemplateToElement( editableElement, {
  42. attributes: {
  43. contentEditable: bind.to( 'isEditable' ),
  44. class: [ bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ) ]
  45. }
  46. } );
  47. }
  48. }