Procházet zdrojové kódy

Updating editor element when used on form's textarea.

Szymon Kupś před 8 roky
rodič
revize
be63edf50d

+ 37 - 0
packages/ckeditor5-core/src/editor/standardeditor.js

@@ -10,6 +10,7 @@
 import Editor from './editor';
 import EditingKeystrokeHandler from '../editingkeystrokehandler';
 import EditingController from '@ckeditor/ckeditor5-engine/src/controller/editingcontroller';
+import isFunction from '@ckeditor/ckeditor5-utils/src/lib/lodash/isFunction';
 
 import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement';
 import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement';
@@ -61,6 +62,8 @@ export default class StandardEditor extends Editor {
 		 */
 
 		this.keystrokes.listenTo( this.editing.view );
+
+		this._attachToForm();
 	}
 
 	/**
@@ -103,6 +106,40 @@ export default class StandardEditor extends Editor {
 		this.setData( getDataFromElement( this.element ) );
 	}
 
+	_attachToForm() {
+		const element = this.element;
+
+		// When replacing textarea which is inside form element.
+		if ( element.tagName.toLowerCase() === 'textarea' && element.form ) {
+			let originalSubmit;
+			const form = element.form;
+			const onSubmit = () => this.updateEditorElement();
+
+			// Replace original submit() method on a form to call our submit function before.
+			// Check if it is a function because it might contain an input with "submit" name.
+			if ( isFunction( form.submit ) ) {
+				originalSubmit = form.submit;
+
+				form.submit = () => {
+					onSubmit();
+					originalSubmit.apply( form );
+				};
+			}
+
+			// Update replaced textarea with data before each submit.
+			form.addEventListener( 'submit', onSubmit );
+
+			// Remove submit listener, and reset original submit method on editor destroy.
+			this.on( 'destroy', () => {
+				form.removeEventListener( 'submit', onSubmit );
+
+				if ( originalSubmit ) {
+					form.submit = originalSubmit;
+				}
+			} );
+		}
+	}
+
 	/**
 	 * Creates a standard editor instance.
 	 *

+ 35 - 0
packages/ckeditor5-core/tests/_assets/echo-server.js

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* eslint-env node */
+
+/**
+ * Simple HTTP server which parses POST requests and returns it in JSON format.
+ */
+const http = require( 'http' );
+const queryString = require( 'querystring' );
+const port = 3030;
+
+const server = http.createServer( ( req, res ) => {
+	const methodName = req.method;
+	let content = '';
+
+	console.info( `Incoming ${ methodName } request.` );
+
+	if ( methodName == 'POST' ) {
+		res.writeHead( 200, { 'Content-Type': 'application/json' } );
+
+		req.on( 'data', data => ( content += data ) );
+		req.on( 'end', () => res.end( JSON.stringify( queryString.parse( content ) ) ) );
+
+		return;
+	}
+
+	res.writeHead( 200, { 'Content-Type': 'text' } );
+	res.end( 'Please make a POST request to get an echo response.' );
+} );
+
+console.info( `Starting server on port ${ port }.` );
+server.listen( port );

+ 6 - 0
packages/ckeditor5-core/tests/manual/formsubmit.html

@@ -0,0 +1,6 @@
+<form id="form" action="http://localhost:3030" method="post">
+	<textarea name="editor" id="editor"><p>foo bar baz</p></textarea>
+	<button type="submit">Submit form</button>
+</form>
+<br />
+<button id="submit-with-js">Submit by calling form.submit()</button>

+ 32 - 0
packages/ckeditor5-core/tests/manual/formsubmit.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
+import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePreset, ContextualToolbar ],
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ],
+		},
+		contextualToolbar: [ 'bold', 'italic', 'link' ]
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		document.getElementById( 'submit-with-js' ).addEventListener( 'click', () => {
+			document.getElementById( 'form' ).submit();
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+

+ 7 - 0
packages/ckeditor5-core/tests/manual/formsubmit.md

@@ -0,0 +1,7 @@
+## Updating editor element when submitting a form
+
+1. Start simple HTTP server located in `ckeditor5-core/tests/_assets/` by calling `node echo-server.js`.
+1. Change editor's contents and press `Submit form` button. You should be redirected to a page which echoes POST data.
+Check if submitted contents match editor contents.
+1. Go back to test page and refresh it. Change editor contents and press `Submit by calling form.submit()` button.
+You should be redirected to a page which echoes POST data. Check if submitted contents match editor contents.