The document editor can be programmatically accessed using the JavaScript object TXTextControl. When using ASP.NET MVC or Web Forms, this object exists directly after loading the page and can be used right away from within JavaScript. For example, in the following view code, the event textControlChanged is directly added to TXTextControl on executing the page.

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().Render()

@section Scripts {

<script type="text/javascript">
    TXTextControl.addEventListener("textControlChanged", function () {
        console.log("textControlChanged");
    });
</script>

}

Angular Only: txDocumentEditorLoaded

When using Angular, the object TXTextControl is dynamically created and therefore accessible at a later time. For this purpose, a global event on the document element is available. After this event is triggered, the TXTextControl object is available.

The following code shows how to attach an event to TXTextControl within the txDocumentEditorLoaded event handler:

document.addEventListener("txDocumentEditorLoaded", function () {
    TXTextControl.addEventListener("textControlChanged", function () {
        console.log("textControlChanged");
    });
});

Diagram: Initialization Events

The following diagram shows the chain of events that are fired on creating a new instance of the document editor.

The events textControlLoaded, documentLoaded and ribbonTabsLoaded are asynchronous and the order might vary depending on the loading time and file size for loaded documents.

Manipulating the Content

The content of the document can be manipulated after the textControlLoaded event is fired. The following code will not work as the Text Control is not ready to accept changes on the document:

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().Render()

@section Scripts {

<script type="text/javascript">

    TXTextControl.selection.setText("Text Control rocks!");
        
</script>

}

In order to manipulate the content on creating a new instance of the editor, the code must be inside (or after) the textControlLoaded event:

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().Render()

@section Scripts {

<script type="text/javascript">

    TXTextControl.addEventListener("textControlLoaded", function () {
        TXTextControl.selection.setText("Text Control rocks!");
    });

</script>

}

Manipulating a Document

In case a document is loaded on creating an instance of the document editor, the content can be manipulated after the documentLoaded event is triggered:

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().LoadText(
    "Hi there! ", TXTextControl.Web.StringStreamType.PlainText).Render()

@section Scripts {

<script type="text/javascript">

    TXTextControl.addEventListener("documentLoaded", function () {
        TXTextControl.select(-1, 0);
        TXTextControl.selection.setText("Text Control rocks!");
    });

</script>

}

Changing the Ribbon

The last event in this chain is the ribbonTabsLoaded event that is triggered after the complete ribbon DOM is available for manipulation. The following code shows how to remove the Clipboard ribbon group of the Home ribbon tab:

TXTextControl.addEventListener("ribbonTabsLoaded", function () {
    document.getElementById("ribbonGroupClipboard").remove();
});

After all of these 3 events have been triggered, all JavaScript API calls can be made to manipulate the content, document and the editor DOM.