6

Document Editor: JavaScript Object Availability and Order of Events

 1 year ago
source link: https://www.textcontrol.com/blog/2022/05/03/documenteditor-javascript-object-availability-and-order-of-events/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

JavaScript Object Availability and Order of Events

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.

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:

Diagram: Initialization Events

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

Event Order

Event order diagram: Asynchronous events on initializing the 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:

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

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:

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:

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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK