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.

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

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:

Loading...

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

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on github.com/TextControl.

Please fork and contribute.

Requirements for This Sample

  • Visual Studio 2017 or better
  • TX Text Control .NET Server for ASP.NET (trial sufficient)