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

Made the config.toolbarContainer and config.editableContainer accept only HTMLElement (previosly also String).

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
48e7162efe

+ 3 - 3
packages/ckeditor5-editor-decoupled/docs/framework/guides/document-editor.md

@@ -26,8 +26,8 @@ import DecoupledDocumentEditor from '@ckeditor/ckeditor5-build-decoupled-documen
 
 DecoupledDocumentEditor
 	.create( '<p>Initial editor data.</p>', {
-		toolbarContainer: '.document-editor__toolbar',
-		editableContainer: '.document-editor__editable',
+		toolbarContainer: document.querySelector( '.document-editor__toolbar' ),
+		editableContainer: document.querySelector( '.document-editor__editable' ),
 
 		cloudServices: {
 			....
@@ -41,7 +41,7 @@ DecoupledDocumentEditor
 	} );
 ```
 
-You may have noticed two configuration options used here: {@link module:core/editor/editorconfig~EditorConfig#toolbarContainer `config.toolbarContainer`} and {@link module:core/editor/editorconfig~EditorConfig#editableContainer `config.editableContainer`}. They specify the location of the editor toolbar and editable in your application, either as [`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)–friendly strings or direct DOM element references.
+You may have noticed two configuration options used here: {@link module:core/editor/editorconfig~EditorConfig#toolbarContainer `config.toolbarContainer`} and {@link module:core/editor/editorconfig~EditorConfig#editableContainer `config.editableContainer`}. They specify the location of the editor toolbar and editable in your application.
 
 If you don't specify these configuration options, then you have to make sure the editor UI is injected into your application after it fires the {@link module:core/editor/editorwithui~EditorWithUI#event:uiReady `uiReady`} event. The toolbar element is accessible via `editor.ui.view.toolbar.element` and the editable element can be found under `editor.ui.view.editable.element`.
 

+ 8 - 38
packages/ckeditor5-editor-decoupled/src/decouplededitor.js

@@ -86,10 +86,10 @@ export default class DecoupledEditor extends Editor {
 	 *		DecoupledEditor
 	 *			.create( '<p>Editor data</p>', {
 	 *				// The location of the toolbar in DOM.
-	 *				toolbarContainer: 'body div.toolbar-container',
+	 *				toolbarContainer: document.querySelector( 'body div.toolbar-container' ),
 	 *
 	 *				// The location of the editable in DOM.
-	 *				editableContainer: 'body div.editable-container'
+	 *				editableContainer: document.querySelector( 'body div.editable-container' )
 	 *			} )
 	 *			.then( editor => {
 	 *				console.log( 'Editor was initialized', editor );
@@ -112,10 +112,10 @@ export default class DecoupledEditor extends Editor {
 	 *				toolbar: [ 'bold', 'italic', ... ],
 	 *
 	 *				// The location of the toolbar in DOM.
-	 *				toolbarContainer: 'div.toolbar-container',
+	 *				toolbarContainer: document.querySelector( 'div.toolbar-container' ),
 	 *
 	 *				// The location of the editable in DOM.
-	 *				editableContainer: 'div.editable-container'
+	 *				editableContainer: document.querySelector( 'div.editable-container' )
 	 *			} )
 	 *			.then( editor => {
 	 *				console.log( 'Editor was initialized', editor );
@@ -173,8 +173,7 @@ mix( DecoupledEditor, DataApiMixin );
 /**
  * A configuration of the {@link module:editor-decoupled/decouplededitor~DecoupledEditor}.
  *
- * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}.
- * It can be defined as a DOM element:
+ * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}:
  *
  *		DecoupledEditor
  *			.create( '<p>Hello world!</p>', {
@@ -188,32 +187,17 @@ mix( DecoupledEditor, DataApiMixin );
  *				console.error( error );
  *			} );
  *
- * or a selector string corresponding to the CSS selector:
- *
- *		DecoupledEditor
- *			.create( '<p>Hello world!</p>', {
- *				// Append the toolbar to the <div class="container">...</div>
- *				toolbarContainer: 'div.container'
- *			} )
- *			.then( editor => {
- *				console.log( editor );
- *			} )
- *			.catch( error => {
- *				console.error( error );
- *			} );
- *
  * **Note**: If not specified, the toolbar must be manually injected into DOM. See
  * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
  * to learn more.
  *
- * @member {String|HTMLElement} module:core/editor/editorconfig~EditorConfig#toolbarContainer
+ * @member {HTMLElement} module:core/editor/editorconfig~EditorConfig#toolbarContainer
  */
 
 /**
  * A configuration of the {@link module:editor-decoupled/decouplededitor~DecoupledEditor}.
  *
- * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable}.
- * It can be defined as a DOM element:
+ * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable}:
  *
  *		DecoupledEditor
  *			.create( '<p>Hello world!</p>', {
@@ -227,23 +211,9 @@ mix( DecoupledEditor, DataApiMixin );
  *				console.error( error );
  *			} );
  *
- * or a selector string corresponding to the CSS selector:
- *
- *		DecoupledEditor
- *			.create( '<p>Hello world!</p>', {
- *				// Append the editable to the <div class="container">...</div>.
- *				editableContainer: 'div.container'
- *			} )
- *			.then( editor => {
- *				console.log( editor );
- *			} )
- *			.catch( error => {
- *				console.error( error );
- *			} );
- *
  * **Note**: If not specified, the editable must be manually injected into DOM. See
  * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
  * to learn more.
  *
- * @member {String|HTMLElement} module:core/editor/editorconfig~EditorConfig#editableContainer
+ * @member {HTMLElement} module:core/editor/editorconfig~EditorConfig#editableContainer
  */

+ 0 - 9
packages/ckeditor5-editor-decoupled/src/decouplededitorui.js

@@ -11,7 +11,6 @@ import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
 import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 /**
  * The decoupled editor UI class.
@@ -69,14 +68,6 @@ export default class DecoupledEditorUI {
 		 * @private
 		 */
 		this._editableContainer = editor.config.get( 'editableContainer' );
-
-		if ( this._toolbarContainer && typeof this._toolbarContainer == 'string' ) {
-			this._toolbarContainer = global.document.querySelector( this._toolbarContainer );
-		}
-
-		if ( this._editableContainer && typeof this._editableContainer == 'string' ) {
-			this._editableContainer = global.document.querySelector( this._editableContainer );
-		}
 	}
 
 	/**

+ 28 - 64
packages/ckeditor5-editor-decoupled/tests/decouplededitorui.js

@@ -69,72 +69,36 @@ describe( 'DecoupledEditorUI', () => {
 				expect( view.editable.element.parentElement ).to.be.null;
 			} );
 
-			describe( 'toolbarContainer', () => {
-				it( 'allocates view#toolbar (selector)', () => {
-					return VirtualDecoupledTestEditor
-						.create( {
-							toolbar: [ 'foo', 'bar' ],
-							toolbarContainer: 'body'
-						} )
-						.then( newEditor => {
-							expect( newEditor.ui.view.toolbar.element.parentElement ).to.equal( document.body );
-
-							return newEditor;
-						} )
-						.then( newEditor => {
-							newEditor.destroy();
-						} );
-				} );
+			it( 'allocates view#toolbar', () => {
+				return VirtualDecoupledTestEditor
+					.create( {
+						toolbar: [ 'foo', 'bar' ],
+						toolbarContainer: document.body
+					} )
+					.then( newEditor => {
+						expect( newEditor.ui.view.toolbar.element.parentElement ).to.equal( document.body );
 
-				it( 'allocates view#toolbar (element)', () => {
-					return VirtualDecoupledTestEditor
-						.create( {
-							toolbar: [ 'foo', 'bar' ],
-							toolbarContainer: document.body
-						} )
-						.then( newEditor => {
-							expect( newEditor.ui.view.toolbar.element.parentElement ).to.equal( document.body );
-
-							return newEditor;
-						} )
-						.then( newEditor => {
-							newEditor.destroy();
-						} );
-				} );
+						return newEditor;
+					} )
+					.then( newEditor => {
+						newEditor.destroy();
+					} );
 			} );
 
-			describe( 'editableContainer', () => {
-				it( 'allocates view#toolbar (selector)', () => {
-					return VirtualDecoupledTestEditor
-						.create( {
-							toolbar: [ 'foo', 'bar' ],
-							editableContainer: 'body'
-						} )
-						.then( newEditor => {
-							expect( newEditor.ui.view.editable.element.parentElement ).to.equal( document.body );
-
-							return newEditor;
-						} )
-						.then( newEditor => {
-							newEditor.destroy();
-						} );
-				} );
+			it( 'allocates view#editable', () => {
+				return VirtualDecoupledTestEditor
+					.create( {
+						toolbar: [ 'foo', 'bar' ],
+						editableContainer: document.body
+					} )
+					.then( newEditor => {
+						expect( newEditor.ui.view.editable.element.parentElement ).to.equal( document.body );
 
-				it( 'allocates view#toolbar (element)', () => {
-					return VirtualDecoupledTestEditor
-						.create( {
-							toolbar: [ 'foo', 'bar' ],
-							editableContainer: document.body
-						} )
-						.then( newEditor => {
-							expect( newEditor.ui.view.editable.element.parentElement ).to.equal( document.body );
-
-							return newEditor;
-						} )
-						.then( newEditor => {
-							newEditor.destroy();
-						} );
-				} );
+						return newEditor;
+					} )
+					.then( newEditor => {
+						newEditor.destroy();
+					} );
 			} );
 		} );
 
@@ -253,7 +217,7 @@ describe( 'DecoupledEditorUI', () => {
 			return VirtualDecoupledTestEditor
 				.create( {
 					toolbar: [ 'foo', 'bar' ],
-					toolbarContainer: 'body'
+					toolbarContainer: document.body
 				} )
 				.then( newEditor => {
 					spy = sinon.spy( newEditor.ui.view, 'destroy' );
@@ -271,7 +235,7 @@ describe( 'DecoupledEditorUI', () => {
 			return VirtualDecoupledTestEditor
 				.create( {
 					toolbar: [ 'foo', 'bar' ],
-					editableContainer: 'body'
+					editableContainer: document.body
 				} )
 				.then( newEditor => {
 					spy = sinon.spy( newEditor.ui.view, 'destroy' );

+ 2 - 2
packages/ckeditor5-editor-decoupled/tests/manual/decouplededitor.js

@@ -24,8 +24,8 @@ function initEditor() {
 			plugins: [ Enter, Typing, Paragraph, Undo, Heading, Bold, Italic ],
 			toolbar: [ 'heading', '|', 'bold', 'italic', 'undo', 'redo' ],
 
-			toolbarContainer: '.toolbar-container',
-			editableContainer: '.editable-container',
+			toolbarContainer: document.querySelector( '.toolbar-container' ),
+			editableContainer: document.querySelector( '.editable-container' )
 		} )
 		.then( newEditor => {
 			console.log( 'Editor was initialized', newEditor );