--- category: builds-integration order: 40 --- {@snippet builds/saving-data/build-autosave-source} # Getting and saving data CKEditor 5 allows you to retrieve the data from and save it to your server (or to your system in general) in various ways. In this guide you can learn about the available options along with their pros and cons. ## Automatic integration with HTML forms This is the classic way of integrating the editor. It is typically used in simpler CMSes, forums, comment sections, etc. This approach is only available in the {@link builds/guides/overview#classic-editor Classic editor} and only if the editor was used to replace a `

``` Classic editor will automatically update the value of the ` ``` Thanks to that, the ` ``` Instead of being printed like this: ```html ``` While simple content like mentioned above does not itself require to be encoded, encoding the data will prevent losing text like "<" or "<img>". --> ## Manually retrieving the data When you: * Use Ajax requests instead of the classic integration with HTML forms, * Implement a single-page application, * Use a different editor type than the Classic editor (and hence, cannot use the previous method), you can retrieve the data from the editor by using the {@link module:editor-classic/classiceditor~ClassicEditor#getData `editor.getData()`} method. For that, you need to store the reference to the `editor` because — unlike in CKEditor 4 — there is no global `CKEDITOR.instances` property. You can do that in multiple ways, for example by assigning the `editor` to a variable defined outside the `then()`'s callback: ```js let editor; ClassicEditor .create( document.querySelector( '#editor' ) ) .then( newEditor => { editor = newEditor; } ) .catch( error => { console.error( error ); } ); // Assuming there is a in your application. document.querySelector( '#submit' ).addEventListener( 'click', () => { const editorData = editor.getData(); // ... } ); ``` ## Autosave feature The {@link module:autosave/autosave~Autosave} feature allows you to automatically save the data (e.g. send it to the server) when needed (when the user changed the content). This plugin is unavailable in any of the builds by default so you need to {@link builds/guides/integration/installing-plugins install it}. Assuming that you implemented a `saveData()` function that sends the data to your server and returns a promise which is resolved once the data is successfully saved, configuring the autosave feature is as simple as: ```js ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ Autosave, // ... other plugins ], autosave: { save( editor ) { return saveData( editor.getData() ); } }, // ... other configuration options } ); ``` The autosave feature listens to the {@link module:engine/model/document~Document#event:change:data `editor.model.document#change:data`} event, throttles it and executes the `config.autosave.save()` function. It also listens to the native [`window#beforeunload`](https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload) event and blocks it in the following cases: * The data has not been saved yet (the `save()` function did not resolve its promise or it was not called yet due to throttling). * Or any of the editor features registered a {@link module:core/pendingactions~PendingActions "pending action"} (e.g. that an image is being uploaded). 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. ### 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' ), { plugins: [ Autosave, // ... other plugins ], 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 (emulated here with a setTimeout()). function saveData( data ) { return new Promise( resolve => { setTimeout( () => { console.log( 'Saved', data ); resolve(); }, HTTP_SERVER_LAG ); } ); } // Update the "Status: Saving..." info. function displayStatus( editor ) { const pendingActions = editor.plugins.get( 'PendingActions' ); const statusIndicator = document.querySelector( '#editor-status' ); pendingActions.on( 'change:hasAny', ( 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 drop a big image into this editor, you will see that it is busy during the entire period when the image is being uploaded. * The editor is also busy when saving the content is in progress (the `save()`'s promise was not resolved). * The autosave feature has a throttling mechanism which groups frequent changes (e.g. typing) are grouped in batches. * The autosave itself does not check whether the data has 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. These actions will make the editor "busy" for a longer time — try leaving the page then. {@snippet builds/saving-data/autosave} ## Handling users exiting the page An additional concern when integrating the editor in your website is that the user may mistakenly leave before saving the data. This problem is automatically handled by the [autosave feature](#autosave-feature) described above, but if you do not use it and instead chose different integration methods, you should consider handling these two scenarios: * The user leaves the page before saving the data (e.g. mistakenly closes a tab or clicks some link). * The user saved the data, but there are some pending actions like an image upload. To handle the former situation you can listen to the native [`window#beforeunload`](https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload) event. The latter situation can be handled by using CKEditor 5 {@link module:core/pendingactions~PendingActions} plugin. ### Demo The example below shows how all these mechanisms can be used together to enable or disable a "Save" button and block the user from leaving the page without saving the data. ```js import PendingActions from '@ckeditor/ckeditor5-core/src/pendingactions'; let isDirty = false; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ PendingActions, // ... other plugins ] } ) .then( editor => { window.editor = editor; handleStatusChanges( editor ); handleSaveButton( editor ); handleBeforeunload( editor ); } ) .catch( err => { console.error( err.stack ); } ); // Handle clicking the "Save" button by sending the data to a // fake HTTP server (emulated here with setTimeout()). function handleSaveButton( editor ) { const saveButton = document.querySelector( '#save' ); const pendingActions = editor.plugins.get( 'PendingActions' ); saveButton.addEventListener( 'click', evt => { const data = editor.getData(); // Register the action of saving the data as a "pending action". // All asynchronous actions related to the editor are tracked like this, // so later on you only need to check `pendingActions.hasAny` to check // whether editor is busy or not. const action = pendingActions.add( 'Saving changes' ); evt.preventDefault(); // Save the data to a fake HTTP server. setTimeout( () => { pendingActions.remove( action ); // Reset isDirty only if data didn't change in the meantime. if ( data == editor.getData() ) { isDirty = false; } updateStatus( editor ); }, HTTP_SERVER_LAG ); } ); } // Listen to new changes (to enable the "Save" button) and to // pending actions (to show the spinner animation when the editor is busy). function handleStatusChanges( editor ) { editor.plugins.get( 'PendingActions' ).on( 'change:hasAny', () => updateStatus( editor ) ); editor.model.document.on( 'change:data', () => { isDirty = true; updateStatus( editor ); } ); } // If the user tries to leave the page before the data is saved, ask // they whether they are sure. function handleBeforeunload( editor ) { const pendingActions = editor.plugins.get( 'PendingActions' ); window.addEventListener( 'beforeunload', evt => { if ( pendingActions.hasAny ) { evt.preventDefault(); } } ); } function updateStatus( editor ) { const saveButton = document.querySelector( '#save' ); // Disables the "Save" button when the data on the server is up to date. if ( isDirty ) { saveButton.classList.add( 'active' ); } else { saveButton.classList.remove( 'active' ); } // Shows the spinner animation. if ( editor.plugins.get( 'PendingActions' ).hasAny ) { saveButton.classList.add( 'saving' ); } else { saveButton.classList.remove( 'saving' ); } } ``` How to understand this demo: * The button changes to "Saving..." when the data is being sent to the server or there are any other pending actions (e.g. an image being uploaded). * 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 clicking the "Save" button. These actions will make the editor "busy" for a longer time — try leaving the page then. {@snippet builds/saving-data/manualsave}