8
0

editableuiview.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module ui/editableui/editableuiview
  7. */
  8. import View from '../view';
  9. /**
  10. * The editable UI view class.
  11. *
  12. * @extends module:ui/view~View
  13. */
  14. export default class EditableUIView extends View {
  15. /**
  16. * Creates an instance of EditableUIView class.
  17. *
  18. * @param {module:utils/locale~Locale} [locale] The locale instance.
  19. * @param {HTMLElement} [editableElement] The editable element. If not specified, this view
  20. * should create it. Otherwise, the existing element should be used.
  21. */
  22. constructor( locale, editableElement ) {
  23. super( locale );
  24. const bind = this.bindTemplate;
  25. if ( editableElement ) {
  26. this.element = this.editableElement = editableElement;
  27. }
  28. this.setTemplate( {
  29. tag: 'div',
  30. attributes: {
  31. class: [
  32. bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ),
  33. 'ck',
  34. 'ck-editor__editable',
  35. 'ck-content',
  36. 'ck-rounded-corners'
  37. ],
  38. contenteditable: bind.to( 'isReadOnly', value => !value ),
  39. }
  40. } );
  41. /**
  42. * Controls whether the editable is writable or not.
  43. *
  44. * @observable
  45. * @member {Boolean} #isReadOnly
  46. */
  47. this.set( 'isReadOnly', false );
  48. /**
  49. * Controls whether the editable is focused, i.e. the user is typing in it.
  50. *
  51. * @observable
  52. * @member {Boolean} #isFocused
  53. */
  54. this.set( 'isFocused', false );
  55. /**
  56. * An external {@link #editableElement} passed into the constructor, which also means
  57. * the view will not render its {@link #template}.
  58. *
  59. * @member {HTMLElement} #externalElement
  60. */
  61. this.externalElement = editableElement;
  62. /**
  63. * The element which is the main editable element (usually the one with `contentEditable="true"`).
  64. *
  65. * @readonly
  66. * @member {HTMLElement} #editableElement
  67. */
  68. }
  69. /**
  70. * Renders the view by either applying the {@link #template} to the existing
  71. * {@link #editableElement} or assigning {@link #element} as {@link #editableElement}.
  72. */
  73. render() {
  74. super.render();
  75. if ( this.externalElement ) {
  76. this.template.apply( this.element = this.externalElement );
  77. } else {
  78. this.editableElement = this.element;
  79. }
  80. }
  81. /**
  82. * @inheritDoc
  83. */
  84. destroy() {
  85. if ( this.externalElement ) {
  86. this.template.revert( this.externalElement );
  87. }
  88. super.destroy();
  89. }
  90. }