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.

Reconnect to server

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);
});
view raw test.js hosted with ❤ by GitHub

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;
}
);
}
view raw test.js hosted with ❤ by GitHub

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();
});
view raw test.js hosted with ❤ by GitHub

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
}
view raw test.js hosted with ❤ by GitHub

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
}
view raw test.js hosted with ❤ by GitHub

You can test this sample on your own by downloading the project from our GitHub repository.