Răsfoiți Sursa

Allow to pass data to the constructor instaead of element to replace.

Szymon Kupś 7 ani în urmă
părinte
comite
50d8bab0df

+ 20 - 7
packages/ckeditor5-editor-classic/src/classiceditor.js

@@ -17,6 +17,7 @@ import ClassicEditorUIView from './classiceditoruiview';
 import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer';
 import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
+import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement';
 
 /**
  * The {@glink builds/guides/overview#classic-editor classic editor} implementation.
@@ -57,9 +58,13 @@ export default class ClassicEditor extends Editor {
 	 * The data will be loaded from it and loaded back to it once the editor is destroyed.
 	 * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
 	 */
-	constructor( element, config ) {
+	constructor( elementOrData, config ) {
 		super( config );
 
+		if ( isElement( elementOrData ) ) {
+			this.element = elementOrData;
+		}
+
 		/**
 		 * The element replacer instance used to hide the editor element.
 		 *
@@ -68,8 +73,6 @@ export default class ClassicEditor extends Editor {
 		 */
 		this._elementReplacer = new ElementReplacer();
 
-		this.element = element;
-
 		this.data.processor = new HtmlDataProcessor();
 
 		this.model.document.createRoot();
@@ -134,19 +137,29 @@ export default class ClassicEditor extends Editor {
 	 * @returns {Promise} A promise resolved once the editor is ready.
 	 * The promise returns the created {@link module:editor-classic/classiceditor~ClassicEditor} instance.
 	 */
-	static create( element, config ) {
+	static create( elementOrData, config ) {
 		return new Promise( resolve => {
-			const editor = new this( element, config );
+			const editor = new this( elementOrData, config );
 
 			resolve(
 				editor.initPlugins()
 					.then( () => editor.ui.init() )
 					.then( () => {
-						editor._elementReplacer.replace( element, editor.ui.view.element );
+						if ( isElement( elementOrData ) ) {
+							editor._elementReplacer.replace( elementOrData, editor.ui.view.element );
+						}
+
 						editor.fire( 'uiReady' );
 					} )
 					.then( () => editor.editing.view.attachDomRoot( editor.ui.view.editableElement ) )
-					.then( () => editor.data.init( getDataFromElement( element ) ) )
+					.then( () => {
+						if ( editor.element ) {
+							editor.data.init( getDataFromElement( editor.element ) );
+						} else {
+							editor.data.init( elementOrData );
+							editor.element = editor.ui.view.element;
+						}
+					} )
 					.then( () => {
 						editor.fire( 'dataReady' );
 						editor.fire( 'ready' );

+ 18 - 0
packages/ckeditor5-editor-classic/tests/manual/classiceditor-data.html

@@ -0,0 +1,18 @@
+<p>
+	<button id="destroyEditor">Destroy editor</button>
+	<button id="initEditor">Init editor</button>
+</p>
+
+<style>
+	body {
+		width: 10000px;
+		height: 10000px;
+	}
+
+	.ck-editor {
+		margin-top: 200px;
+		margin-left: 100px;
+		margin-bottom: 200px;
+		width: 450px;
+	}
+</style>

+ 60 - 0
packages/ckeditor5-editor-classic/tests/manual/classiceditor-data.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console:false, document, window */
+
+import ClassicEditor from '../../src/classiceditor';
+import Enter from '@ckeditor/ckeditor5-enter/src/enter';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import testUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
+
+let editor, editable, observer;
+
+const data = '<h2>Hello world!</h2><p>This is an editor instance.</p>';
+
+function initEditor() {
+	ClassicEditor
+		.create( data, {
+			plugins: [ Enter, Typing, Paragraph, Undo, Heading, Bold, Italic ],
+			toolbar: [ 'heading', '|', 'bold', 'italic', 'undo', 'redo' ]
+		} )
+		.then( newEditor => {
+			console.log( 'Editor was initialized', newEditor );
+			console.log( 'You can now play with it using global `editor` and `editable` variables.' );
+
+			window.editor = editor = newEditor;
+			window.editable = editable = editor.editing.view.document.getRoot();
+
+			observer = testUtils.createObserver();
+			observer.observe( 'Editable', editable, [ 'isFocused' ] );
+
+			document.body.appendChild( editor.element );
+		} )
+		.catch( err => {
+			console.error( err.stack );
+		} );
+}
+
+function destroyEditor() {
+	editor.destroy()
+		.then( () => {
+			editor.element.remove();
+
+			window.editor = editor = null;
+			window.editable = editable = null;
+
+			observer.stopListening();
+			observer = null;
+			console.log( 'Editor was destroyed' );
+		} );
+}
+
+document.getElementById( 'initEditor' ).addEventListener( 'click', initEditor );
+document.getElementById( 'destroyEditor' ).addEventListener( 'click', destroyEditor );

+ 18 - 0
packages/ckeditor5-editor-classic/tests/manual/classiceditor-data.md

@@ -0,0 +1,18 @@
+1. Click "Init editor".
+2. Expected:
+  * Framed editor should be created.
+  * Original element should disappear.
+  * There should be a toolbar with "Bold", "Italic", "Undo" and "Redo" buttons.
+3. Click "Destroy editor".
+4. Expected:
+  * Editor should be destroyed.
+  * Original element should be visible.
+  * The element should contain its data (updated).
+  * The 'ck-body region' should be removed.
+
+## Notes:
+
+* You can play with:
+  * `editable.isReadOnly`,
+* Changes to `editable.isFocused` should be logged to the console.
+* Features should work.