Up to date?

This article applies to TX Text Control 32.0 versions after Service Pack 4.

TX Text Control 32.0 Service Pack 4 Released

In SPA (Single Page Application), the page is loaded only once and the content is updated dynamically. This is done by using JavaScript to retrieve data from the server and update the page without reloading it. This makes the application faster and more responsive because the user does not have to wait for the page to reload every time they interact with it.

When using the Document Editor in a SPA, or when loading the editor using MVC partial views when using ASP.NET Core, you must ensure that the editor is properly initialized and destroyed when the page is loaded and unloaded. This is important to prevent multiple JavaScript and CSS references from being loaded and the editor from not being properly destroyed when the page is unloaded.

Partial Views in ASP.NET Core

Consider the following sub-view that implements a Document Editor instance. The component was added to the project using the NuGet package.

@using TXTextControl.Web.MVC
@Html.TXTextControl().TextControl().Render()
view raw test.cshtml hosted with ❤ by GitHub

The following code shows the view that contains two buttons, adds a Document Editor instance to the view by loading the partial view, and removes the Editor from the DOM.

<input type="button" onclick="loadEditor()" value="Load Editor" />
<input type="button" onclick="removeEditor()" value="Remove Editor" />
<div id="editor"></div>
<script>
function loadEditor() {
// checks if editor exists and
// gracefully close the WebSocket connection
// and remove the entire editor from the DOM
if (typeof TXTextControl !== 'undefined')
TXTextControl.removeFromDom();
// load the partial view
$('#editor').load('@Url.Action("EditorPartial")');
}
function removeEditor() {
if (typeof TXTextControl !== 'undefined')
TXTextControl.removeFromDom();
}
</script>
view raw test.cshtml hosted with ❤ by GitHub

The loadEditor function checks if the TXTextControl object exists and if it does, the removeFromDom method is called to remove the entire object from the DOM. This method also removes event handlers added by the Document Editor and removes added CSS references.

The removeEditor method simply calls the removeFromDom method to remove the editor.

JavaScript SPA Applications

When using the document editor in a JavaScript SPA application, the editor must be properly initialized and destroyed, and the initial JavaScript must be dynamically added and removed. But the rest is the same as in the example above, where removeFromDom is used to remove the instance from the current DOM.

The following code shows how to add the editor to a SPA application and how to remove it from the DOM.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TX Text Control Document Editor Remove From DOM Demo</title>
<style>
#txDocumentEditor {
height: 800px;
width: 800px;
}
</style>
</head>
<body>
<div id="txDocumentEditor"></div>
<button onclick="createEditor()">Add Editor</button>
<button onclick="removeEditor()">Remove Editor</button>
<script>
var scriptUrl = "https://localhost:7015/api/TXWebSocket/GetResource?name=tx-document-editor.min.js";
var wssUrl = "wss://localhost:7015/api/TXWebSocket";
function removeEditor() {
removeScript();
TXTextControl.removeFromDom();
}
function createEditor() {
loadScript(scriptUrl, addEditor);
}
function loadScript(url, callback) {
const script = document.createElement("script");
script.type = "text/javascript";
script.onload = function() {
callback();
};
script.onreadystatechange = function() {
if (this.readyState === "loaded" || this.readyState === "complete") {
this.onreadystatechange = null;
callback();
}
};
script.src = url;
document.head.appendChild(script);
}
function removeScript() {
const script = document.querySelector("script[src='" + scriptUrl + "']");
if (script) {
script.remove();
}
}
function addEditor() {
TXTextControl.init({
containerID: "txDocumentEditor",
webSocketURL: wssUrl
});
}
</script>
</body>
</html>
view raw test.html hosted with ❤ by GitHub

Conclusion

When using the Document Editor in a SPA or when loading the editor using MVC partial views when using ASP.NET Core, you must ensure that the editor is properly initialized and destroyed. This is important to prevent multiple JavaScript and CSS references from being loaded and the editor from not being properly destroyed when the page is unloaded.