classiceditorui.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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 ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer';
  12. /**
  13. * The classic editor UI class.
  14. *
  15. * @extends module:core/editor/editorui~EditorUI
  16. */
  17. export default class ClassicEditorUI extends EditorUI {
  18. /**
  19. * Creates an instance of the classic editor UI class.
  20. *
  21. * @param {module:core/editor/editor~Editor} editor The editor instance.
  22. * @param {module:ui/editorui/editoruiview~EditorUIView} view The view of the UI.
  23. */
  24. constructor( editor, view ) {
  25. super( editor );
  26. /**
  27. * The main (top–most) view of the editor UI.
  28. *
  29. * @private
  30. * @member {module:ui/editorui/editoruiview~EditorUIView} #_view
  31. */
  32. this._view = view;
  33. /**
  34. * A normalized `config.toolbar` object.
  35. *
  36. * @private
  37. * @member {Object}
  38. */
  39. this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );
  40. /**
  41. * The element replacer instance used to hide the editor's source element.
  42. *
  43. * @protected
  44. * @member {module:utils/elementreplacer~ElementReplacer}
  45. */
  46. this._elementReplacer = new ElementReplacer();
  47. }
  48. /**
  49. * The main (top–most) view of the editor UI.
  50. *
  51. * @readonly
  52. * @member {module:ui/editorui/editoruiview~EditorUIView} #view
  53. */
  54. get view() {
  55. return this._view;
  56. }
  57. /**
  58. * @inheritDoc
  59. */
  60. get element() {
  61. return this.view.element;
  62. }
  63. /**
  64. * Initializes the UI.
  65. *
  66. * @param {HTMLElement|null} replacementElement The DOM element that will be the source for the created editor.
  67. */
  68. init( replacementElement ) {
  69. const editor = this.editor;
  70. const view = this.view;
  71. view.render();
  72. // Set–up the sticky panel with toolbar.
  73. view.stickyPanel.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
  74. view.stickyPanel.limiterElement = view.element;
  75. if ( this._toolbarConfig.viewportTopOffset ) {
  76. view.stickyPanel.viewportTopOffset = this._toolbarConfig.viewportTopOffset;
  77. }
  78. // Setup the editable.
  79. const editingRoot = editor.editing.view.document.getRoot();
  80. view.editable.bind( 'isReadOnly' ).to( editingRoot );
  81. view.editable.bind( 'isFocused' ).to( editor.editing.view.document );
  82. view.editable.name = editingRoot.rootName;
  83. this._editableElements.set( view.editable.name, view.editable.element );
  84. this.focusTracker.add( view.editable.element );
  85. view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
  86. enableToolbarKeyboardFocus( {
  87. origin: editor.editing.view,
  88. originFocusTracker: this.focusTracker,
  89. originKeystrokeHandler: editor.keystrokes,
  90. toolbar: view.toolbar
  91. } );
  92. if ( replacementElement ) {
  93. this._elementReplacer.replace( replacementElement, this.element );
  94. }
  95. this.fire( 'ready' );
  96. }
  97. /**
  98. * @inheritDoc
  99. */
  100. destroy() {
  101. this._elementReplacer.restore();
  102. this._view.destroy();
  103. super.destroy();
  104. }
  105. }