decouplededitoruiview.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  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. import Template from '@ckeditor/ckeditor5-ui/src/template';
  12. /**
  13. * The decoupled editor UI view. It is a virtual view providing an inline
  14. * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
  15. * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any
  16. * specific arrangement of the components in the DOM.
  17. *
  18. * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
  19. * to learn more about this view.
  20. *
  21. * @extends module:ui/editorui/editoruiview~EditorUIView
  22. */
  23. export default class DecoupledEditorUIView extends EditorUIView {
  24. /**
  25. * Creates an instance of the decoupled editor UI view.
  26. *
  27. * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
  28. * @param {HTMLElement} [editableElement] The editable element. If not specified, it will be automatically created by
  29. * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
  30. */
  31. constructor( locale, editableElement, editingView ) {
  32. super( locale );
  33. /**
  34. * The main toolbar of the decoupled editor UI.
  35. *
  36. * @readonly
  37. * @member {module:ui/toolbar/toolbarview~ToolbarView}
  38. */
  39. this.toolbar = new ToolbarView( locale );
  40. /**
  41. * The editable of the decoupled editor UI.
  42. *
  43. * @readonly
  44. * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
  45. */
  46. this.editable = new InlineEditableUIView( locale, editingView, editableElement );
  47. // This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
  48. // Also because of the above, make sure the toolbar supports rounded corners.
  49. Template.extend( this.toolbar.template, {
  50. attributes: {
  51. class: [
  52. 'ck-reset_all',
  53. 'ck-rounded-corners'
  54. ]
  55. }
  56. } );
  57. }
  58. /**
  59. * @inheritDoc
  60. */
  61. render() {
  62. super.render();
  63. this.registerChild( [ this.toolbar, this.editable ] );
  64. }
  65. /**
  66. * @inheritDoc
  67. */
  68. get editableElement() {
  69. return this.editable.element;
  70. }
  71. }