Auto Save

In order to provide the true WYSIWYG rendering and the unique pixel-perfect editing experience, the document is getting synchronized with the server using a WebSocket connection. A constant connection is required in order to maintain the document.

This sample shows how to use the local browser storage to save the document locally in order to recover the document when the connection is lost.

In the textControlLoaded event, the autoSaveDocument function is attached to an interval of 500 milliseconds. This is a background task and will not influence the user editing experience.

TXTextControl.addEventListener("textControlLoaded", function (e) { // disable the loading progress dialog TXTextControl.isLoadingDialogEnabled = false;

// restore the document restoreDocument();

// set auto save to 500 milliseconds var intervalAutoSave = setInterval(autoSaveDocument, 500); }); In the autoSaveDocument function, the document is saved in the internal Text Control format and is stored in the local browser session storage. This storage is session-wide and can be accessed browser tab-wide. If you need to implement a "per document" session, you might want to give the session storage entry a unique name.

function autoSaveDocument() { // store the document in the session storage // which is shared over all browser tabs (complete session) TXTextControl.saveDocument( TXTextControl.streamType.InternalUnicodeFormat, function (e) { sessionStorage.document = e.data; } ); } In case, the connection is lost, TX Text Control fires the event webSocketClosed . In this event, we simply reload the page in order to reconnect to the server.

TXTextControl.addEventListener("webSocketClosed", function (e) { // reload, if connection is lost location.reload(); }); In the textControlLoaded event (see first code snippet), the function restoreDocument is called. This function is loading the stored document from the session storage in case it is available.

function restoreDocument() { // if document exists, load it from the session storage if (sessionStorage["document"]) {

$("#txReconnectMsg").show(); // hide dialog

TXTextControl.loadDocument( TXTextControl.streamType.InternalUnicodeFormat, sessionStorage.document); } else $("#txReconnectMsg").hide(); // hide dialog } Other events are used to show and hide messages informing the user that the application is trying to reconnect to the server. The following snippet shows the complete JavaScript that is required to implement this feature:

TXTextControl.addEventListener("textControlLoaded", function (e) { // disable the loading progress dialog TXTextControl.isLoadingDialogEnabled = false;

// restore the document restoreDocument();

// set auto save to 500 milliseconds var intervalAutoSave = setInterval(autoSaveDocument, 500); });

TXTextControl.addEventListener("webSocketClosed", function (e) { // reload, if connection is lost location.reload(); });

TXTextControl.addEventListener("documentLoaded", function (e) { $("#txReconnectMsg").hide(); // show dialog });

function autoSaveDocument() { // store the document in the session storage // which is shared over all browser tabs (complete session) TXTextControl.saveDocument( TXTextControl.streamType.InternalUnicodeFormat, function (e) { sessionStorage.document = e.data; } ); }

function restoreDocument() { // if document exists, load it from the session storage if (sessionStorage["document"]) {

$("#txReconnectMsg").show(); // hide dialog

TXTextControl.loadDocument( TXTextControl.streamType.InternalUnicodeFormat, sessionStorage.document); } else $("#txReconnectMsg").hide(); // hide dialog } You can test this sample on your own by downloading the project from our GitHub repository.

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

Auto Save

Post tagged with Auto Save in 2019

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

Auto Save

Post tagged with Auto Save in 2019 ​

September 2019

Post tagged with Auto Save in 2019