ckeditor5-image-upload-base64/docs/_snippets/builds/saving-data/autosave.html

The development environment of CKEditor 5 – the best browser-based rich text editor.

<div id="snippet-autosave">
	<p>Type some text to test the <a href="#autosave-feature">autosave</a> feature.</p>
</div>

<div id="snippet-autosave-header">
	<div id="snippet-autosave-status">
		<div id="snippet-autosave-status_label">Status:</div>
		<div id="snippet-autosave-status_spinner">
			<span id="snippet-autosave-status_spinner-label"></span>
			<span id="snippet-autosave-status_spinner-loader"></span>
		</div>
	</div>

	<div id="snippet-autosave-server">
		<div id="snippet-autosave-server_label">HTTP server lag (ms):</div>
		<input id="snippet-autosave-lag" type="number" value="500" step="100" min="0" max="9000">
	</div>
</div>

<p>Server data:</p>

<pre><code id="snippet-autosave-console">Type some text to test the &#x3C;a href=&#x22;#autosave-feature&#x22;&#x3E;autosave&#x3C;/a&#x3E; feature.</code></pre>

<style>
	#snippet-autosave-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: var(--ck-color-toolbar-background);
		border: 1px solid var(--ck-color-toolbar-border);
		padding: 10px;
		border-radius: var(--ck-border-radius);
		margin-top: -1.5em;
		margin-bottom: 1.5em;
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	#snippet-autosave-status_spinner{
		display: flex;
		align-items: center;
		position: relative;
	}
	#snippet-autosave-status_spinner-label {
		position: relative;
	}

	#snippet-autosave-status_spinner-label::after {
		content: 'Saved!';
		color: green;
		display: inline-block;
		margin-right: var(--ck-spacing-medium);
	}

	/* During "Saving" display spinner and change content of label. */
	#snippet-autosave-status.busy #snippet-autosave-status_spinner-label::after  {
		content: 'Saving...';
		color: red;
	}

	#snippet-autosave-status.busy #snippet-autosave-status_spinner-loader {
		display: block;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		border-top: 3px solid hsl(0, 0%, 70%);
		border-right: 2px solid transparent;
		animation: autosave-status-spinner 1s linear infinite;
	}

	#snippet-autosave-status,
	#snippet-autosave-server {
		display: flex;
		align-items: center;
	}

	#snippet-autosave-server_label,
	#snippet-autosave-status_label {
		font-weight: bold;
		margin-right: var(--ck-spacing-medium);
	}

	#snippet-autosave + .ck.ck-editor .ck-editor__editable {
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}

	#snippet-autosave-lag {
		padding: 4px;
	}

	#snippet-autosave-console {
		max-height: 300px;
		overflow: auto;
		white-space: normal;
		background: #2b2c26;
		transition: background-color 500ms;
	}

	#snippet-autosave-console.updated {
		background: green;
	}

	@keyframes autosave-status-spinner {
		to { transform: rotate( 360deg ); }
	}
</style>