Document Editor: Initialization Events
There are several events that the TX Text Control provides during the initialization phase. These events and the order in which they are fired are explained in this article.
There are a number of events that are fired when the Document Editor is initialized and documents are loaded. Starting with version 32.0, an additional event has been added for each ribbon tab created during startup: ribbonTabLoaded.
New ribbonTabLoaded Event
Previously, there was a single event that would fire when all of the ribbon tabs were loaded. The ribbonTabLoaded event is fired for the tab and returns not only the name of the tab but also the DOM element for it.
But first, let us take a look at the events that are triggered by the loading process of the Document Editor. The following four events will be triggered:
- textControlLoaded
- ribbonTabsLoaded
- ribbonTabLoaded
- documentLoaded
This view code adds the Document Editor to the view and loads a document.
@using TXTextControl.Web.MVC
@{
var sDocument = "<html><body><p>Welcome to <strong>Text Control</strong></p></body></html>";
}
@Html.TXTextControl().TextControl().LoadText(sDocument,
TXTextControl.Web.StringStreamType.HTMLFormat).Render()Adding Event Listeners
This JavaScript attaches these events to the TX Text Control Document Editor instance.
TXTextControl.addEventListener("textControlLoaded", function() {
console.log("Text Control loaded");
});
TXTextControl.addEventListener("ribbonTabLoaded", function(tab) {
console.log("Ribbon tab loaded: " + tab.tabName);
});
TXTextControl.addEventListener("ribbonTabsLoaded", function () {
console.log("Ribbon tabs loaded");
});
TXTextControl.addEventListener("documentLoaded", function() {
console.log("Document loaded");
});The following console output shows the event order of these attached events.
Text Control loaded
Document loaded
Ribbon tab loaded: ribbonTabHome
Ribbon tab loaded: ribbonTabInsert
Ribbon tab loaded: ribbonTabPageLayout
Ribbon tab loaded: ribbonTabReports
Ribbon tab loaded: ribbonTabView
Ribbon tab loaded: ribbonTabReferences
Ribbon tab loaded: ribbonTabProofing
Ribbon tab loaded: ribbonTabPermissions
Ribbon tab loaded: ribbonTabFormFields
Ribbon tab loaded: ribbonTabTableLayout
Ribbon tab loaded: ribbonTabFormula
Ribbon tab loaded: ribbonTabFrameFormatting
Ribbon tab loaded: ribbonTabChartFormatting
Ribbon tabs loadedVersion 32.0 utilizes two WebSocket connections to simultaneously load resources and the ribbon content. After loading the main document, users can type and use the first ribbon tab.
RibbonTab Manipulation
The ribbonTabLoaded event returns the name of the ribbon tab that is loaded, and the item itself. The event can be used for manipulation of the returned element or removal of the element from the DOM altogether. The following JavaScript looks for the specific ribbon tab name ribbonTabInsert and removes the item from it's parent.
TXTextControl.addEventListener("ribbonTabLoaded", function(tab) {
if (tab.tabName == "ribbonTabInsert") {
// remove tab content from DOM
tab.elemTab.parentNode.removeChild(tab.elemTab);
// find associated LI element in the ribbon and remove it
var elem = document.querySelector("[rel='" + tab.tabName + "']");
elem.parentNode.parentNode.removeChild(elem.parentNode);
}
});In addition, the associated list entry defined by a rel attribute is removed.
ASP.NET
Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.
- Angular
- Blazor
- React
- JavaScript
- ASP.NET MVC, ASP.NET Core, and WebForms
Related Posts
ASP.NETContext MenuDocument Editor
Manipulating the Context Menu in the Document Editor using JavaScript
This article shows how to manipulate the context menu in the Document Editor in JavaScript. The context menu can be customized by adding or removing items or by changing the event handler of…
ASP.NETJavaScriptDocument Editor
Detect Toggle Button Changes Using a MutationObserver
This article shows how to detect changes of toggle buttons in the ribbon of the web editor using a MutationObserver. The state of a toggle button in the ribbon visualizes the state of a certain…
ASP.NETASP.NET CoreDocument Editor
5 Layout Patterns for Integrating the TX Text Control Document Editor in…
When integrating a document editor into an ASP.NET Core application, the technical setup is only one part of the work. Just as important is the question of how the editor fits into the user…
Introducing Text Control Agent Skills
Text Control Agent Skills are structured definitions that teach AI coding assistants how to build applications with the TX Text Control Document Editor. Each skill contains step-by-step…
ASP.NETApp ServicesASP.NET Core
Deploying the TX Text Control Document Editor from the Private NuGet Feed to…
This tutorial shows how to deploy the TX Text Control Document Editor to Azure App Services using an ASP.NET Core Web App. The Document Editor is a powerful word processing component that can be…