ソースを参照

Docs: Demo of autosave.

Piotrek Koszuliński 7 年 前
コミット
66ba502472

+ 32 - 0
docs/_snippets/builds/saving-data/autosave.html

@@ -0,0 +1,32 @@
+<p>HTTP sever lag: <input id="snippet-autosave-lag" type="number" value="500" step="100" min="0" max="9000"></p>
+
+<p>Status: <span id="snippet-autosave-status"></span></p>
+
+<div id="snippet-autosave">
+	<p>Test me!</p>
+</div>
+
+<pre id="snippet-autosave-console"></pre>
+
+<style>
+	#snippet-autosave-status {
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+		background-color: green;
+	}
+
+	#snippet-autosave-status.busy {
+		background-color: red;
+	}
+
+	#snippet-autosave-console {
+		height: 300px;
+		overflow: auto;
+
+		/* Similar to code blocks. */
+		background: #2b2c26;
+		padding: 1.333em;
+		color: #FFF;
+	}
+</style>

+ 66 - 0
docs/_snippets/builds/saving-data/autosave.js

@@ -0,0 +1,66 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document, setTimeout */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+let HTTP_SERVER_LAG = 500;
+
+document.querySelector( '#snippet-autosave-lag' ).addEventListener( 'change', evt => {
+	HTTP_SERVER_LAG = evt.target.value;
+} );
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-autosave' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			viewportTopOffset: 60
+		},
+		autosave: {
+			save( editor ) {
+				return saveData( editor.getData() );
+			}
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		displayStatus( editor );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+function saveData( data ) {
+	return new Promise( resolve => {
+		log( `Saving... (${ data })` );
+
+		setTimeout( () => {
+			log( 'Saved.' );
+
+			resolve();
+		}, HTTP_SERVER_LAG );
+	} );
+}
+
+function displayStatus( editor ) {
+	const pendingActions = editor.plugins.get( 'PendingActions' );
+	const statusIndicator = document.querySelector( '#snippet-autosave-status' );
+
+	pendingActions.on( 'change:isPending', ( evt, propertyName, newValue ) => {
+		if ( newValue ) {
+			statusIndicator.classList.add( 'busy' );
+		} else {
+			statusIndicator.classList.remove( 'busy' );
+		}
+	} );
+}
+
+function log( msg ) {
+	const console = document.querySelector( '#snippet-autosave-console' );
+
+	console.textContent = msg + '\n' + console.textContent;
+}

+ 0 - 0
docs/_snippets/builds/saving-data/build-autosave-source.html


+ 14 - 0
docs/_snippets/builds/saving-data/build-autosave-source.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+
+import Autosave from '@ckeditor/ckeditor5-autosave/src/autosave';
+
+ClassicEditor.builtinPlugins.push( Autosave );
+
+window.ClassicEditor = ClassicEditor;

+ 62 - 1
docs/builds/guides/integration/saving-data.md

@@ -3,6 +3,8 @@ category: builds-integration
 order: 40
 ---
 
+{@snippet builds/saving-data/build-autosave-source}
+
 # Getting and saving data
 
 CKEditor 5 allows you to retrieve and save the data to your server (or to your system in general) in various ways. In this guide you can learn about the options and their pros and cons.
@@ -146,7 +148,66 @@ It also listens to the native [`window#beforeunload`](https://developer.mozilla.
 
 This automatically secures you from the user leaving the page before the content is saved or some ongoing actions like image upload did not finish.
 
-**TODO: demo**
+### Demo
+
+This demo shows a simple integration of the editor with a fake HTTP server (which needs 1000ms to save the content).
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		autosave: {
+			save( editor ) {
+				return saveData( editor.getData() );
+			}
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		displayStatus( editor );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+// Save the data to a fake HTTP server.
+function saveData( data ) {
+	return new Promise( resolve => {
+		console.log( `Saving... (${ data })` );
+
+		setTimeout( () => {
+			console.log( 'Saved.' );
+
+			resolve();
+		}, HTTP_SERVER_LAG );
+	} );
+}
+
+// Display information whether
+function displayStatus( editor ) {
+	const pendingActions = editor.plugins.get( 'PendingActions' );
+	const statusIndicator = document.querySelector( '#editor-status' );
+
+	pendingActions.on( 'change:isPending', ( evt, propertyName, newValue ) => {
+		if ( newValue ) {
+			statusIndicator.classList.add( 'busy' );
+		} else {
+			statusIndicator.classList.remove( 'busy' );
+		}
+	} );
+}
+```
+
+How to understand this demo:
+
+* The status indicator shows when the editor has some unsaved content or pending actions.
+	* If you would drop a big image into this editor you will see that it is busy during the entire period while the image is being uploaded.
+	* The editor is busy also when saving the content is in progress (the `save()`'s promise was not resolved).
+* The autosave feature will throttle changes so frequent changes (e.g. typing) are grouped in batches.
+* The autosave does not check itself whether the data really changed. It bases on changes in the model which, in special cases, may not be "visible" in the data. You can add such a check yourself if you would like to avoid sending the same data to the server twice in a row.
+* You will be asked whether you want to leave the page if an image is being uploaded or the data has not been saved successfully yet. You can test that by dropping a big image into the editor or changing the "HTTP server lag" to a high value (e.g. 9000ms) and typing something. Those actions will make the editor "busy" for a longer time – try leaving the page at that moments.
+
+{@snippet builds/saving-data/autosave}
 
 ## Handling users exiting the page