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

Docs: Sample updated. [skip ci]

Krzysztof Krztoń 7 лет назад
Родитель
Сommit
0fb1982f37

+ 12 - 19
packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js

@@ -7,6 +7,7 @@
 
 // Basic classes to create an editor.
 import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';
+import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
 import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
@@ -69,10 +70,6 @@ export default class BootstrapEditor extends Editor {
 		this._elementReplacer = new ElementReplacer();
 	}
 
-	get element() {
-		return this.ui.view.element;
-	}
-
 	destroy() {
 		// When destroyed, editor sets the output of editor#getData() into editor#element...
 		this.updateSourceElement();
@@ -123,17 +120,17 @@ mix( BootstrapEditor, DataApiMixin );
 mix( BootstrapEditor, ElementApiMixin );
 
 // The class organizing the UI of the editor, binding it with existing Bootstrap elements in DOM.
-class BootstrapEditorUI {
+class BootstrapEditorUI extends EditorUI {
 	constructor( editor ) {
-		this.editor = editor;
+		super( editor );
 
 		// The global UI view of the editor. It aggregates various Bootstrap DOM elements.
-		const view = this.view = new EditorUIView( editor.locale );
+		const view = this._view = new EditorUIView( editor.locale );
 
-		// This is the main editor element in DOM.
+		// This is the main editor element in the DOM.
 		view.element = $( '.ck-editor' );
 
-		// This is the editable view in DOM. It will replace the data container in DOM.
+		// This is the editable view in the DOM. It will replace the data container in the DOM.
 		view.editable = new InlineEditableUIView( editor.locale );
 
 		// References to the dropdown elements for further usage. See #_setupBootstrapHeadingDropdown.
@@ -144,27 +141,27 @@ class BootstrapEditorUI {
 		view.toolbarButtons = {};
 
 		[ 'bold', 'italic', 'underline', 'undo', 'redo' ].forEach( name => {
-			// Retrieve the jQuery object corresponding with the button in DOM.
+			// Retrieve the jQuery object corresponding with the button in the DOM.
 			view.toolbarButtons[ name ] = view.element.find( `#${ name }` );
 		} );
+	}
 
-		// Mandatory EditorUI interface components.
-		this.componentFactory = new ComponentFactory( editor );
-		this.focusTracker = new FocusTracker();
+	get view() {
+		return this._view;
 	}
 
 	init() {
 		const editor = this.editor;
 		const view = this.view;
 
-		// Render the editable component in DOM first.
+		// Render the editable component in the DOM first.
 		view.editable.render();
 
 		// Create an editing root in the editing layer. It will correspond with the
 		// document root created in the constructor().
 		const editingRoot = editor.editing.view.document.getRoot();
 
-		// Bind the basic attributes of the editable in DOM with the editing layer.
+		// Bind the basic attributes of the editable in the DOM with the editing layer.
 		view.editable.bind( 'isReadOnly' ).to( editingRoot );
 		view.editable.bind( 'isFocused' ).to( editor.editing.view.document );
 		view.editable.name = editingRoot.rootName;
@@ -174,10 +171,6 @@ class BootstrapEditorUI {
 		this._setupBootstrapHeadingDropdown();
 	}
 
-	destroy() {
-		this.view.editable.destroy();
-	}
-
 	// This method activates Bold, Italic, Underline, Undo and Redo buttons in the toolbar.
 	_setupBootstrapToolbarButtons() {
 		const editor = this.editor;

+ 7 - 14
packages/ckeditor5-ui/docs/framework/guides/external-ui.md

@@ -18,6 +18,7 @@ The ready–to–use builds of CKEditor like {@link examples/builds/classic-edit
 ```js
 // Basic classes to create an editor.
 import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';
+import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
 import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
@@ -86,10 +87,6 @@ export default class BootstrapEditor extends Editor {
 		this._elementReplacer = new ElementReplacer();
 	}
 
-	get element() {
-		return this.ui.view.element;
-	}
-
 	destroy() {
 		// When destroyed, the editor sets the output of editor#getData() into editor#element...
 		this.updateSourceElement();
@@ -256,12 +253,12 @@ Define the `BootstrapEditorUI` and then have a closer look at the content of the
 
 ```js
 // The class organizing the UI of the editor, binding it with existing Bootstrap elements in the DOM.
-class BootstrapEditorUI {
+class BootstrapEditorUI extends EditorUI {
 	constructor( editor ) {
-		this.editor = editor;
+		super( editor );
 
 		// The global UI view of the editor. It aggregates various Bootstrap DOM elements.
-		const view = this.view = new EditorUIView( editor.locale );
+		const view = this._view = new EditorUIView( editor.locale );
 
 		// This is the main editor element in the DOM.
 		view.element = $( '.ck-editor' );
@@ -280,10 +277,10 @@ class BootstrapEditorUI {
 			// Retrieve the jQuery object corresponding with the button in the DOM.
 			view.toolbarButtons[ name ] = view.element.find( `#${ name }` );
 		} );
+	}
 
-		// Mandatory EditorUI interface components.
-		this.componentFactory = new ComponentFactory( editor );
-		this.focusTracker = new FocusTracker();
+	get view() {
+		return this._view;
 	}
 
 	init() {
@@ -307,10 +304,6 @@ class BootstrapEditorUI {
 		this._setupBootstrapHeadingDropdown();
 	}
 
-	destroy() {
-		this.view.editable.destroy();
-	}
-
 	// This method activates Bold, Italic, Underline, Undo and Redo buttons in the toolbar.
 	_setupBootstrapToolbarButtons() {
 		...