classiceditoruiview.js 2.6 KB

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