8
0

classiceditorui.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import BoxedEditorUI from '../ui/editorui/boxed/boxededitorui.js';
  6. import EditableUI from '../ui/editableui/editableui.js';
  7. import InlineEditableUIView from '../ui/editableui/inline/inlineeditableuiview.js';
  8. import Model from '../ui/model.js';
  9. import StickyToolbar from '../ui/bindings/stickytoolbar.js';
  10. import StickyToolbarView from '../ui/toolbar/sticky/stickytoolbarview.js';
  11. /**
  12. * Classic editor UI. Uses inline editable and sticky toolbar, all
  13. * enclosed in a boxed UI.
  14. *
  15. * @memberOf editor-classic
  16. * @extends ui.editorUI.boxed.BoxedEditorUI
  17. */
  18. export default class ClassicEditorUI extends BoxedEditorUI {
  19. /**
  20. * Creates an instance of the classic editor UI.
  21. *
  22. * @param {core.editor.Editor} editor
  23. */
  24. constructor( editor ) {
  25. super( editor );
  26. /**
  27. * Toolbar controller.
  28. *
  29. * @readonly
  30. * @member {ui.toolbar.Toolbar} editor-classic.ClassicEditorUI#toolbar
  31. */
  32. this.toolbar = this._createToolbar();
  33. /**
  34. * Editable UI controller.
  35. *
  36. * @readonly
  37. * @member {ui.editableUI.EditableUI} editor-classic.ClassicEditorUI#editable
  38. */
  39. this.editable = this._createEditableUI();
  40. }
  41. /**
  42. * @inheritDoc
  43. */
  44. init() {
  45. this.toolbar.model.set( 'limiterElement', this.editor.ui.view.element );
  46. return super.init();
  47. }
  48. /**
  49. * The editing host.
  50. *
  51. * @readonly
  52. * @type {HTMLElement}
  53. */
  54. get editableElement() {
  55. return this.editable.view.element;
  56. }
  57. /**
  58. * Creates the sticky toolbar of the editor.
  59. *
  60. * @protected
  61. * @returns {ui.toolbar.Toolbar}
  62. */
  63. _createToolbar() {
  64. const editor = this.editor;
  65. const model = new Model( {
  66. config: this.editor.config.get( 'toolbar' )
  67. } );
  68. model.bind( 'isActive' ).to( editor.focusManager, 'isFocused' );
  69. const toolbar = new StickyToolbar( model, new StickyToolbarView( editor.locale ), editor );
  70. this.add( 'top', toolbar );
  71. return toolbar;
  72. }
  73. /**
  74. * Creates the main editable of the editor and registers it in {@link core.editor.Editor#focusManager}.
  75. *
  76. * @protected
  77. * @returns {ui.editableUI.EditableUI}
  78. */
  79. _createEditableUI() {
  80. const editor = this.editor;
  81. const editable = editor.editing.view.getRoot();
  82. const editableUI = new EditableUI( editable, new InlineEditableUIView( editor.locale ), editor );
  83. this.add( 'main', editableUI );
  84. // @TODO: Do it automatically ckeditor5-core#23
  85. editor.focusManager.add( editableUI.view.element );
  86. return editableUI;
  87. }
  88. }