classiceditoruiview.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module editor-classic/classiceditoruiview
  7. */
  8. import BoxedEditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview';
  9. import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
  10. import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview';
  11. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  12. import '../theme/classiceditor.css';
  13. /**
  14. * Classic editor UI view. Uses an inline editable and a sticky toolbar, all
  15. * enclosed in a boxed UI view.
  16. *
  17. * @extends module:ui/editorui/boxed/boxededitoruiview~BoxedEditorUIView
  18. */
  19. export default class ClassicEditorUIView extends BoxedEditorUIView {
  20. /**
  21. * Creates an instance of the classic editor UI view.
  22. *
  23. * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
  24. * @param {module:engine/view/view~View} editingView The editing view instance this view is related to.
  25. * @param {Object} [options={}] Configuration options fo the view instance.
  26. * @param {Boolean} [options.shouldToolbarGroupWhenFull] When set `true` enables automatic items grouping
  27. * in the main {@link module:editor-classic/classiceditoruiview~ClassicEditorUIView#toolbar toolbar}.
  28. * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
  29. */
  30. constructor( locale, editingView, options = {} ) {
  31. super( locale );
  32. /**
  33. * Sticky panel view instance. This is a parent view of a {@link #toolbar}
  34. * that makes toolbar sticky.
  35. *
  36. * @readonly
  37. * @member {module:ui/panel/sticky/stickypanelview~StickyPanelView}
  38. */
  39. this.stickyPanel = new StickyPanelView( locale );
  40. /**
  41. * Toolbar view instance.
  42. *
  43. * @readonly
  44. * @member {module:ui/toolbar/toolbarview~ToolbarView}
  45. */
  46. this.toolbar = new ToolbarView( locale, {
  47. shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
  48. } );
  49. /**
  50. * Editable UI view.
  51. *
  52. * @readonly
  53. * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
  54. */
  55. this.editable = new InlineEditableUIView( locale, editingView );
  56. }
  57. /**
  58. * @inheritDoc
  59. */
  60. render() {
  61. super.render();
  62. // Set toolbar as a child of a stickyPanel and makes toolbar sticky.
  63. this.stickyPanel.content.add( this.toolbar );
  64. this.top.add( this.stickyPanel );
  65. this.main.add( this.editable );
  66. }
  67. }