decouplededitoruiview.js 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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-decoupled/decouplededitoruiview
  7. */
  8. import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
  9. import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
  10. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  11. /**
  12. * The decoupled editor UI view. It is a virtual view providing an inline
  13. * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
  14. * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any
  15. * specific arrangement of the components in the DOM.
  16. *
  17. * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
  18. * to learn more about this view.
  19. *
  20. * @extends module:ui/editorui/editoruiview~EditorUIView
  21. */
  22. export default class DecoupledEditorUIView extends EditorUIView {
  23. /**
  24. * Creates an instance of the decoupled editor UI view.
  25. *
  26. * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
  27. * @param {module:engine/view/view~View} editingView The editing view instance this view is related to.
  28. * @param {Object} [options={}] Configuration options fo the view instance.
  29. * @param {HTMLElement} [options.editableElement] The editable element. If not specified, it will be automatically created by
  30. * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
  31. * @param {Boolean} [options.shouldToolbarGroupWhenFull] When set `true` enables automatic items grouping
  32. * in the main {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar toolbar}.
  33. * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
  34. */
  35. constructor( locale, editingView, options = {} ) {
  36. super( locale );
  37. /**
  38. * The main toolbar of the decoupled editor UI.
  39. *
  40. * @readonly
  41. * @member {module:ui/toolbar/toolbarview~ToolbarView}
  42. */
  43. this.toolbar = new ToolbarView( locale, {
  44. shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
  45. } );
  46. /**
  47. * The editable of the decoupled editor UI.
  48. *
  49. * @readonly
  50. * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
  51. */
  52. this.editable = new InlineEditableUIView( locale, editingView, options.editableElement );
  53. // This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
  54. // Because of the above, make sure the toolbar supports rounded corners.
  55. // Also, make sure the toolbar has the proper dir attribute because its ancestor may not have one
  56. // and some toolbar item styles depend on this attribute.
  57. this.toolbar.extendTemplate( {
  58. attributes: {
  59. class: [
  60. 'ck-reset_all',
  61. 'ck-rounded-corners'
  62. ],
  63. dir: locale.uiLanguageDirection
  64. }
  65. } );
  66. }
  67. /**
  68. * @inheritDoc
  69. */
  70. render() {
  71. super.render();
  72. this.registerChild( [ this.toolbar, this.editable ] );
  73. }
  74. }