classiceditorui.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module editor-classic/classiceditorui
  7. */
  8. import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
  9. import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
  10. /**
  11. * The classic editor UI class.
  12. */
  13. export default class ClassicEditorUI {
  14. /**
  15. * Creates an instance of the editor UI class.
  16. *
  17. * @param {module:core/editor/editor~Editor} editor The editor instance.
  18. * @param {module:ui/editorui/editoruiview~EditorUIView} view View of the ui.
  19. */
  20. constructor( editor, view ) {
  21. /**
  22. * Editor that the UI belongs to.
  23. *
  24. * @readonly
  25. * @member {module:core/editor/editor~Editor}
  26. */
  27. this.editor = editor;
  28. /**
  29. * View of the ui.
  30. *
  31. * @readonly
  32. * @member {module:ui/editorui/editoruiview~EditorUIView}
  33. */
  34. this.view = view;
  35. /**
  36. * Instance of the {@link module:ui/componentfactory~ComponentFactory}.
  37. *
  38. * @readonly
  39. * @member {module:ui/componentfactory~ComponentFactory}
  40. */
  41. this.componentFactory = new ComponentFactory( editor );
  42. /**
  43. * Keeps information about editor focus.
  44. *
  45. * @readonly
  46. * @member {module:utils/focustracker~FocusTracker}
  47. */
  48. this.focusTracker = new FocusTracker();
  49. // Set–up the view.
  50. view.set( 'width', editor.config.get( 'ui.width' ) );
  51. view.set( 'height', editor.config.get( 'ui.height' ) );
  52. // Set–up the toolbar.
  53. view.toolbar.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
  54. view.toolbar.limiterElement = view.element;
  55. // Setup the editable.
  56. const editingRoot = editor.editing.createRoot( 'div' );
  57. view.editable.bind( 'isReadOnly' ).to( editingRoot );
  58. view.editable.bind( 'isFocused' ).to( editor.editing.view );
  59. view.editable.name = editingRoot.rootName;
  60. this.focusTracker.add( view.editableElement );
  61. }
  62. /**
  63. * Initializes the UI.
  64. *
  65. * @returns {Promise} A Promise resolved when the initialization process is finished.
  66. */
  67. init() {
  68. const editor = this.editor;
  69. return this.view.init()
  70. .then( () => {
  71. const toolbarConfig = editor.config.get( 'toolbar' );
  72. const promises = [];
  73. if ( toolbarConfig ) {
  74. promises.push( this.view.toolbar.fillFromConfig( toolbarConfig, this.componentFactory ) );
  75. }
  76. return Promise.all( promises );
  77. } )
  78. .then( () => {
  79. const toolbarFocusTracker = this.view.toolbar.focusTracker;
  80. // Because toolbar items can get focus, the overall state of
  81. // the toolbar must also be tracked.
  82. this.focusTracker.add( this.view.toolbar.element );
  83. // Focus the toolbar on the keystroke, if not already focused.
  84. editor.keystrokes.set( 'Alt+F10', ( data, cancel ) => {
  85. if ( this.focusTracker.isFocused && !toolbarFocusTracker.isFocused ) {
  86. this.view.toolbar.focus();
  87. cancel();
  88. }
  89. } );
  90. // Blur the toolbar and bring the focus back to editable on the keystroke.
  91. this.view.toolbar.keystrokes.set( 'Esc', ( data, cancel ) => {
  92. if ( toolbarFocusTracker.isFocused ) {
  93. editor.editing.view.focus();
  94. cancel();
  95. }
  96. } );
  97. } );
  98. }
  99. /**
  100. * Destroys the UI.
  101. *
  102. * @returns {Promise} A Promise resolved when the destruction process is finished.
  103. */
  104. destroy() {
  105. return this.view.destroy();
  106. }
  107. }