classiceditoruiview.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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/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. /**
  13. * Classic editor UI view. Uses an inline editable and a sticky toolbar, all
  14. * enclosed in a boxed UI view.
  15. *
  16. * @extends module:ui/editorui/boxed/boxededitoruiview~BoxedEditorUIView
  17. */
  18. export default class ClassicEditorUIView extends BoxedEditorUIView {
  19. /**
  20. * Creates an instance of the classic editor UI view.
  21. *
  22. * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
  23. */
  24. constructor( locale ) {
  25. super( locale );
  26. /**
  27. * Sticky panel view instance. This is a parent view of a {@link #toolbar}
  28. * that makes toolbar sticky.
  29. *
  30. * @readonly
  31. * @member {module:ui/panel/sticky/stickypanelview~StickyPanelView}
  32. */
  33. this.stickyPanel = new StickyPanelView( locale );
  34. /**
  35. * Toolbar view instance.
  36. *
  37. * @readonly
  38. * @member {module:ui/toolbar/toolbarview~ToolbarView}
  39. */
  40. this.toolbar = new ToolbarView( locale );
  41. this.toolbar.extendTemplate( {
  42. attributes: {
  43. class: 'ck-editor-toolbar'
  44. }
  45. } );
  46. /**
  47. * Editable UI view.
  48. *
  49. * @readonly
  50. * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
  51. */
  52. this.editable = new InlineEditableUIView( locale );
  53. }
  54. /**
  55. * @inheritDoc
  56. */
  57. render() {
  58. super.render();
  59. // Set toolbar as a child of a stickyPanel and makes toolbar sticky.
  60. this.stickyPanel.content.add( this.toolbar );
  61. this.top.add( this.stickyPanel );
  62. this.main.add( this.editable );
  63. }
  64. /**
  65. * @inheritDoc
  66. */
  67. get editableElement() {
  68. return this.editable.element;
  69. }
  70. }