8
0
Просмотр исходного кода

Refactored the editor – moved the UI outside.

Piotrek Koszuliński 9 лет назад
Родитель
Сommit
0c5d782435

+ 9 - 98
packages/ckeditor5-editor-classic/src/classic.js

@@ -9,16 +9,9 @@ import StandardEditor from '../editor/standardeditor.js';
 
 import HtmlDataProcessor from '../engine/dataprocessor/htmldataprocessor.js';
 
-import BoxedEditorUI from '../ui/editorui/boxed/boxededitorui.js';
+import ClassicEditorUI from './classiceditorui.js';
 import BoxedEditorUIView from '../ui/editorui/boxed/boxededitoruiview.js';
 
-import EditableUI from '../ui/editableui/editableui.js';
-import InlineEditableUIView from '../ui/editableui/inline/inlineeditableuiview.js';
-
-import Model from '../ui/model.js';
-import Toolbar from '../ui/bindings/toolbar.js';
-import StickyToolbarView from '../ui/stickytoolbar/stickytoolbarview.js';
-
 import ElementReplacer from '../utils/elementreplacer.js';
 
 /**
@@ -45,27 +38,16 @@ export default class ClassicEditor extends StandardEditor {
 
 		this.data.processor = new HtmlDataProcessor();
 
+		this.ui = new ClassicEditorUI( this );
+		this.ui.view = new BoxedEditorUIView( this.ui.viewModel, this.locale );
+
 		/**
 		 * The element replacer instance used to hide editor element.
 		 *
-		 * @private
+		 * @protected
 		 * @member {utils.ElementReplacer} editor-classic.Classic#_elementReplacer
 		 */
 		this._elementReplacer = new ElementReplacer();
-
-		/**
-		 * Toolbar controller.
-		 *
-		 * @protected
-		 * @member {ui.toolbar.Toolbar} editor-classic.Classic#_toolbar
-		 */
-
-		/**
-		 * Editable UI controller.
-		 *
-		 * @protected
-		 * @member {ui.editableUI.EditableUI} editor-classic.Classic#_editableUI
-		 */
 	}
 
 	/**
@@ -107,84 +89,13 @@ export default class ClassicEditor extends StandardEditor {
 			const editor = new ClassicEditor( element, config );
 
 			resolve(
-				editor._createUI()
-					.then( () => editor.initPlugins() )
-					.then( () => editor._initUI() )
+				editor.initPlugins()
+					.then( () => editor._elementReplacer.replace( element, editor.ui.view.element ) )
+					.then( () => editor.ui.init() )
+					.then( () => editor.editing.view.attachDomRoot( editor.ui.editableElement ) )
 					.then( () => editor.loadDataFromEditorElement() )
 					.then( () => editor )
 			);
 		} );
 	}
-
-	/**
-	 * Creates editor UI (the {@link ui.editorUI.BoxedEditorUI boxed version} of it) with a sticky toolbar and an
-	 * inline editable.
-	 *
-	 * @protected
-	 * @returns {Promise}
-	 */
-	_createUI() {
-		const editorUI = new BoxedEditorUI( this );
-		const editorUIView = new BoxedEditorUIView( editorUI.viewModel, this.locale );
-
-		editorUI.view = editorUIView;
-
-		this.ui = editorUI;
-
-		this._createToolbar();
-		this._createEditableUI();
-
-		this._elementReplacer.replace( this.element, this.ui.view.element );
-
-		return Promise.resolve();
-	}
-
-	/**
-	 * Initializes editor UI. The UI has to be {@link #_createUI created} beforehand.
-	 *
-	 * @protected
-	 * @returns {Promise}
-	 */
-	_initUI() {
-		if ( this.config.toolbar ) {
-			this._toolbar.addButtons( this.config.toolbar );
-		}
-
-		return this.ui.init()
-			.then( () => this.editing.view.attachDomRoot( this._editableUI.view.element ) );
-	}
-
-	/**
-	 * Creates editor sticky toolbar.
-	 *
-	 * @protected
-	 */
-	_createToolbar() {
-		const toolbarModel = new Model();
-		const toolbarView = new StickyToolbarView( toolbarModel, this.locale );
-		const toolbar = new Toolbar( toolbarModel, toolbarView, this );
-
-		toolbarModel.bind( 'isActive' ).to( this.editing.view.getRoot(), 'isFocused' );
-
-		this.ui.add( 'top', toolbar );
-
-		this._toolbar = toolbar;
-	}
-
-	/**
-	 * Creates editor main editable.
-	 *
-	 * @protected
-	 */
-	_createEditableUI() {
-		const editable = this.editing.view.getRoot();
-		const editableUI = new EditableUI( this, editable );
-		const editableUIView = new InlineEditableUIView( editableUI.viewModel, this.locale );
-
-		editableUI.view = editableUIView;
-
-		this.ui.add( 'main', editableUI );
-
-		this._editableUI = editableUI;
-	}
 }

+ 105 - 0
packages/ckeditor5-editor-classic/src/classiceditorui.js

@@ -0,0 +1,105 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import BoxedEditorUI from '../ui/editorui/boxed/boxededitorui.js';
+
+import EditableUI from '../ui/editableui/editableui.js';
+import InlineEditableUIView from '../ui/editableui/inline/inlineeditableuiview.js';
+
+import Model from '../ui/model.js';
+import Toolbar from '../ui/bindings/toolbar.js';
+import StickyToolbarView from '../ui/stickytoolbar/stickytoolbarview.js';
+
+/**
+ * Classic editor. Uses inline editable and sticky toolbar, all
+ * enclosed in a boxed UI.
+ *
+ * @memberOf editor-classic
+ * @extends ui.editorUI.boxed.BoxedEditorUI
+ */
+export default class ClassicEditorUI extends BoxedEditorUI {
+	/**
+	 * Creates an instance of the classic editor UI.
+	 *
+	 * @param {ckeditor5.editor.Editor} editor
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		/**
+		 * Toolbar controller.
+		 *
+		 * @readonly
+		 * @member {ui.toolbar.Toolbar} editor-classic.ClassicEditorUI#toolbar
+		 */
+		this.toolbar = this._createToolbar();
+
+		/**
+		 * Editable UI controller.
+		 *
+		 * @readonly
+		 * @member {ui.editableUI.EditableUI} editor-classic.ClassicEditorUI#editableUI
+		 */
+		this.editableUI = this._createEditableUI();
+	}
+
+	/**
+	 * The HTML element which is editable (usually the one with `contentEditable=true`).
+	 *
+	 * @readonly
+	 * @type {HTMLElement}
+	 */
+	get editableElement() {
+		return this.editableUI.view.element;
+	}
+
+	init() {
+		if ( this.editor.config.toolbar ) {
+			this.toolbar.addButtons( this.editor.config.toolbar );
+		}
+
+		return super.init();
+	}
+
+	/**
+	 * Creates editor sticky toolbar.
+	 *
+	 * @protected
+	 */
+	_createToolbar() {
+		const editor = this.editor;
+
+		const toolbarModel = new Model();
+		const toolbarView = new StickyToolbarView( toolbarModel, editor.locale );
+		const toolbar = new Toolbar( toolbarModel, toolbarView, editor );
+
+		toolbarModel.bind( 'isActive' ).to( editor.editing.view.getRoot(), 'isFocused' );
+
+		this.add( 'top', toolbar );
+
+		return toolbar;
+	}
+
+	/**
+	 * Creates editor main editable.
+	 *
+	 * @protected
+	 */
+	_createEditableUI() {
+		const editor = this.editor;
+
+		const editable = editor.editing.view.getRoot();
+		const editableUI = new EditableUI( editor, editable );
+		const editableUIView = new InlineEditableUIView( editableUI.viewModel, editor.locale );
+
+		editableUI.view = editableUIView;
+
+		this.add( 'main', editableUI );
+
+		return editableUI;
+	}
+}

+ 0 - 3
packages/ckeditor5-editor-classic/tests/manual/classic.js

@@ -47,6 +47,3 @@ function destroyEditor() {
 
 document.getElementById( 'initEditor' ).addEventListener( 'click', initEditor );
 document.getElementById( 'destroyEditor' ).addEventListener( 'click', destroyEditor );
-
-// TODO remove me!
-initEditor();

+ 2 - 4
packages/ckeditor5-editor-classic/tests/manual/classic.md

@@ -15,9 +15,7 @@
 ## Notes:
 
 * You can play with:
-  * `editable.isEditable`,
-  * `boldModel.isEnabled`, `italicModel.isEnabled` and `fontModel.isEnabled`.
-  * `fontModel.isOn`.
-* Changes to `editable.isFocused/isEditable` should be logged to the console.
+  * `editable.isReadOnly`,
+* Changes to `editable.isFocused` should be logged to the console.
 * Clicks on the buttons should be logged to the console.