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

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

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 loaded

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

In addition, the associated list entry defined by a rel attribute is removed.