8
0

classiceditorui.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module editor-classic/classiceditorui
  7. */
  8. import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
  9. import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
  10. import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
  11. import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
  12. import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer';
  13. /**
  14. * The classic editor UI class.
  15. *
  16. * @extends module:core/editor/editorui~EditorUI
  17. */
  18. export default class ClassicEditorUI extends EditorUI {
  19. /**
  20. * Creates an instance of the classic editor UI class.
  21. *
  22. * @param {module:core/editor/editor~Editor} editor The editor instance.
  23. * @param {module:ui/editorui/editoruiview~EditorUIView} view The view of the UI.
  24. */
  25. constructor( editor, view ) {
  26. super( editor );
  27. /**
  28. * The main (top–most) view of the editor UI.
  29. *
  30. * @readonly
  31. * @member {module:ui/editorui/editoruiview~EditorUIView} #view
  32. */
  33. this.view = view;
  34. /**
  35. * A normalized `config.toolbar` object.
  36. *
  37. * @private
  38. * @member {Object}
  39. */
  40. this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );
  41. /**
  42. * The element replacer instance used to hide the editor's source element.
  43. *
  44. * @protected
  45. * @member {module:utils/elementreplacer~ElementReplacer}
  46. */
  47. this._elementReplacer = new ElementReplacer();
  48. }
  49. /**
  50. * @inheritDoc
  51. */
  52. get element() {
  53. return this.view.element;
  54. }
  55. /**
  56. * Initializes the UI.
  57. *
  58. * @param {HTMLElement|null} replacementElement The DOM element that will be the source for the created editor.
  59. */
  60. init( replacementElement ) {
  61. const editor = this.editor;
  62. const view = this.view;
  63. const editingView = editor.editing.view;
  64. const editable = view.editable;
  65. const editingRoot = editingView.document.getRoot();
  66. // The editable UI and editing root should share the same name. Then name is used
  67. // to recognize the particular editable, for instance in ARIA attributes.
  68. editable.name = editingRoot.rootName;
  69. view.render();
  70. // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
  71. // But it can be available earlier if a DOM element has been passed to BalloonEditor.create().
  72. const editableElement = editable.element;
  73. // Register the editable UI view in the editor. A single editor instance can aggregate multiple
  74. // editable areas (roots) but the classic editor has only one.
  75. this._editableElements.set( editable.name, editableElement );
  76. // Let the global focus tracker know that the editable UI element is focusable and
  77. // belongs to the editor. From now on, the focus tracker will sustain the editor focus
  78. // as long as the editable is focused (e.g. the user is typing).
  79. this.focusTracker.add( editableElement );
  80. // Let the editable UI element respond to the changes in the global editor focus
  81. // tracker. It has been added to the same tracker a few lines above but, in reality, there are
  82. // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
  83. // as they have focus, the editable should act like it is focused too (although technically
  84. // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
  85. // Doing otherwise will result in editable focus styles disappearing, once e.g. the
  86. // toolbar gets focused.
  87. view.editable.bind( 'isFocused' ).to( this.focusTracker );
  88. // Bind the editable UI element to the editing view, making it an end– and entry–point
  89. // of the editor's engine. This is where the engine meets the UI.
  90. editingView.attachDomRoot( editableElement );
  91. // If an element containing the initial data of the editor was provided, replace it with
  92. // an editor instance's UI in DOM until the editor is destroyed. For instance, a <textarea>
  93. // can be such element.
  94. if ( replacementElement ) {
  95. this._elementReplacer.replace( replacementElement, this.element );
  96. }
  97. this._initPlaceholder();
  98. this._initToolbar();
  99. this.fire( 'ready' );
  100. }
  101. /**
  102. * @inheritDoc
  103. */
  104. destroy() {
  105. const view = this.view;
  106. const editingView = this.editor.editing.view;
  107. this._elementReplacer.restore();
  108. editingView.detachDomRoot( view.editable.name );
  109. view.destroy();
  110. super.destroy();
  111. }
  112. /**
  113. * Initializes the editor toolbar.
  114. *
  115. * @private
  116. */
  117. _initToolbar() {
  118. const editor = this.editor;
  119. const view = this.view;
  120. const editingView = editor.editing.view;
  121. // Set–up the sticky panel with toolbar.
  122. view.stickyPanel.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
  123. view.stickyPanel.limiterElement = view.element;
  124. if ( this._toolbarConfig.viewportTopOffset ) {
  125. view.stickyPanel.viewportTopOffset = this._toolbarConfig.viewportTopOffset;
  126. }
  127. view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
  128. enableToolbarKeyboardFocus( {
  129. origin: editingView,
  130. originFocusTracker: this.focusTracker,
  131. originKeystrokeHandler: editor.keystrokes,
  132. toolbar: view.toolbar
  133. } );
  134. }
  135. /**
  136. * Enable the placeholder text on the editing root, if any was configured.
  137. *
  138. * @private
  139. */
  140. _initPlaceholder() {
  141. const editor = this.editor;
  142. const editingView = editor.editing.view;
  143. const editingRoot = editingView.document.getRoot();
  144. const placeholderText = editor.config.get( 'placeholder' ) ||
  145. editor.sourceElement && editor.sourceElement.getAttribute( 'placeholder' );
  146. if ( placeholderText ) {
  147. enablePlaceholder( {
  148. view: editingView,
  149. element: editingRoot,
  150. text: placeholderText,
  151. isDirectHost: false
  152. } );
  153. }
  154. }
  155. }