| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- /**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- import BoxedEditorUIView from '../ui/editorui/boxed/boxededitoruiview.js';
- import InlineEditableUIView from '../ui/editableui/inline/inlineeditableuiview.js';
- import StickyToolbarView from '../ui/toolbar/sticky/stickytoolbarview.js';
- /**
- * Classic editor UI view. Uses inline editable and sticky toolbar, all
- * enclosed in a boxed UI view.
- *
- * @memberOf editor-classic
- * @extends ui.editorUI.boxed.BoxedEditorUIView
- */
- export default class ClassicEditorUIView extends BoxedEditorUIView {
- /**
- * Creates an instance of the classic editor UI.
- *
- * @param {core.editor.Editor} editor
- */
- constructor( editor, locale ) {
- super( editor, locale );
- /**
- * Toolbar view.
- *
- * @readonly
- * @member {ui.toolbar.ToolbarView} editor-classic.ClassicEditorUI#toolbar
- */
- this.toolbar = this._createToolbar();
- /**
- * Editable UI view.
- *
- * @readonly
- * @member {ui.editableUI.EditableUIView} editor-classic.ClassicEditorUI#editable
- */
- this.editable = this._createEditableUIView( editor );
- }
- /**
- * @inheritDoc
- */
- init() {
- this.toolbar.limiterElement = this.element;
- const toolbarConfig = this.editor.config.get( 'toolbar' );
- if ( toolbarConfig ) {
- for ( let name of toolbarConfig ) {
- this.toolbar.items.add( this.featureComponents.create( name ) );
- }
- }
- return super.init();
- }
- /**
- * The editing host element, {@link editor-classic.ClassicEditorUI#editable}.
- *
- * @readonly
- * @type {HTMLElement}
- */
- get editableElement() {
- return this.editable.element;
- }
- /**
- * Creates the sticky toolbar view of the editor.
- *
- * @protected
- * @returns {ui.stickyToolbar.StickyToolbarView}
- */
- _createToolbar() {
- const editor = this.editor;
- const toolbar = new StickyToolbarView( editor.locale );
- toolbar.bind( 'isActive' ).to( editor.focusTracker, 'isFocused' );
- this.top.add( toolbar );
- return toolbar;
- }
- /**
- * Creates the main editable view of the editor and registers it
- * in {@link core.editor.Editor#focusTracker}.
- *
- * @protected
- * @returns {ui.editableUI.EditableUIView}
- */
- _createEditableUIView() {
- const editor = this.editor;
- const editable = editor.editing.view.getRoot();
- const editableUIView = new InlineEditableUIView( editor.locale );
- editableUIView.bind( 'isReadOnly', 'isFocused' ).to( editable );
- editableUIView.name = editable.rootName;
- this.main.add( editableUIView );
- // @TODO: Do it automatically ckeditor5-core#23
- editor.focusTracker.add( editableUIView.element );
- return editableUIView;
- }
- }
|