Kaynağa Gözat

Docs: Improved docs.

Krzysztof Krztoń 7 yıl önce
ebeveyn
işleme
777c8ef27d

+ 4 - 2
packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js

@@ -78,14 +78,13 @@ export default class BootstrapEditor extends Editor {
 	static create( element, config ) {
 		return new Promise( resolve => {
 			const editor = new this( element, config );
-			const editable = editor.ui.view.editable;
 
 			resolve(
 				editor.initPlugins()
 					// Initialize the UI first. See the BootstrapEditorUI class to learn more.
 					.then( () => editor.ui.init( element ) )
 					// Bind the editor editing layer to the editable in DOM.
-					.then( () => editor.editing.view.attachDomRoot( editable.element ) )
+					.then( () => editor.editing.view.attachDomRoot( editor.ui.getEditableElement() ) )
 					// Fill the editable with the initial data.
 					.then( () => editor.data.init( getDataFromElement( element ) ) )
 					// Fire the events that announce that the editor is complete and ready to use.
@@ -153,6 +152,9 @@ class BootstrapEditorUI extends EditorUI {
 		view.editable.bind( 'isFocused' ).to( editor.editing.view.document );
 		view.editable.name = editingRoot.rootName;
 
+		// Register editable element so it is available via getEditableElement() method.
+		this._editableElements.set( view.editable.name, view.editable.element );
+
 		// Setup the existing, external Bootstrap UI so it works with the rest of the editor.
 		this._setupBootstrapToolbarButtons();
 		this._setupBootstrapHeadingDropdown();

+ 4 - 2
packages/ckeditor5-ui/docs/framework/guides/external-ui.md

@@ -97,14 +97,13 @@ export default class BootstrapEditor extends Editor {
 	static create( element, config ) {
 		return new Promise( resolve => {
 			const editor = new this( element, config );
-			const editable = editor.ui.view.editable;
 
 			resolve(
 				editor.initPlugins()
 					// Initialize the UI first. See the BootstrapEditorUI class to learn more.
 					.then( () => editor.ui.init( element ) )
 					// Bind the editor editing layer to the editable in DOM.
-					.then( () => editor.editing.view.attachDomRoot( editable.element ) )
+					.then( () => editor.editing.view.attachDomRoot( editor.ui.getEditableElement() ) )
 					// Fill the editable with the initial data.
 					.then( () => editor.data.init( getDataFromElement( element ) ) )
 					// Fire the events that announce that the editor is complete and ready to use.
@@ -288,6 +287,9 @@ class BootstrapEditorUI extends EditorUI {
 		view.editable.bind( 'isFocused' ).to( editor.editing.view.document );
 		view.editable.name = editingRoot.rootName;
 
+		// Register editable element so it is available via getEditableElement() method.
+		this._editableElements.set( view.editable.name, view.editable.element );
+
 		// Setup the existing, external Bootstrap UI so it works with the rest of the editor.
 		this._setupBootstrapToolbarButtons();
 		this._setupBootstrapHeadingDropdown();

+ 2 - 2
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -62,7 +62,7 @@ export default class EditableUIView extends View {
 		/**
 		 * The element which is the main editable element (usually the one with `contentEditable="true"`).
 		 *
-		 * @readonly
+		 * @private
 		 * @member {HTMLElement} #_editableElement
 		 */
 		this._editableElement = editableElement;
@@ -71,7 +71,7 @@ export default class EditableUIView extends View {
 		 * Whether an external {@link #_editableElement} was passed into the constructor, which also means
 		 * the view will not render its {@link #template}.
 		 *
-		 * @protected
+		 * @private
 		 * @member {Boolean} #_hasExternalElement
 		 */
 		this._hasExternalElement = !!this._editableElement;

+ 0 - 13
packages/ckeditor5-ui/src/editorui/editoruiview.js

@@ -85,16 +85,3 @@ export default class EditorUIView extends View {
 		document.body.appendChild( bodyElement );
 	}
 }
-
-/**
- * This error is thrown when a component tries to access deprecated `editableElement` property in any of the subclasses of
- * {@link module:ui/editorui/editoruiview~EditorUIView} (which usually is one of
- * {@link module:editor-balloon/ballooneditoruiview~BalloonEditorUIView},
- * {@link module:editor-classic/classiceditoruiview~ClassicEditorUIView},
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView},
- * {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView}).
- * Instead the {@link module:ui/editableui/editableuiview~EditableUIView#editableElement `EditableUIView editableElement`}
- * could be used.
- *
- * @error deprecated-ui-view-editableElement
- */

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js

@@ -52,7 +52,7 @@ export default class BalloonToolbar extends Plugin {
 		this.toolbarView = this._createToolbarView();
 
 		/**
-		 * Tracks the focus of the {@link module:ui/editableui/editableuiview~EditableUIView#editableElement}
+		 * Tracks the focus of the {@link module:core/editor/editorui~EditorUI#getEditableElement editable element}
 		 * and the {@link #toolbarView}. When both are blurred then the toolbar should hide.
 		 *
 		 * @readonly