TX Text Control HTML5 Document Editor (Angular version)

This library offers a HTML5 based rich text editor of TX Text Control .NET Server for ASP.NET. Give your users an MS Word compatible document editor to create powerful reporting templates anywhere - in any HTML5-based browser including Google Chrome, Firefox, Safari and Microsoft Edge.

Prerequisites

The TX Text Control HTML5 Document Editor communicates with the backend over a WebSocket connection. Therefore you additionally need to create and run a Node.js application which contains an instance of the class WebSocketServer from the package tx-websocket-server.

The "heart" of the document editor is the so called synchronization service that synchronizes the document in order to provide the WYSIWYG rendering. If you want to deploy your project, you will have to host your own synchronization service and set the serviceAddress in the WebSocket server application mentioned above accordingly. The synchronization service is part of TX Text Control .NET Server for ASP.NET.

Installation

ng add @txtextcontrol/tx-ng-document-editor

Important notice: From Angular v17 onwards, "standalone" apps are the new default for the CLI. If you want DocumentEditorModule to be added to your app.module.ts automatically, you have to use the --no-standalone flag when creating a new Angular project with ng new. Standalone applications created without this flag will show the error Bootstrap call not found when using the ng add command.

Usage

Your component.html could look like this, for example (the only mandatory attributes are width, height and webSocketURL):

<tx-document-editor
   width="1000px"
   height="800px"
   webSocketURL="ws://www.server.com:8080/TXWebSocket"
   statusBarColor="#FF00FF"
   [controlChars]="true"
   [userNames]="['user1', 'user2']">
</tx-document-editor>

Possible attributes

• width (string) - The width of the component (e. g. "1000px").
• height (string) - The height of the component (e. g. "800px").
• webSocketURL (string) - The WebSocket URL.
• documentTargetMarkers (boolean) - Sets whether markers for hypertext targets are shown in the editor.
• backColor (string) - Determines the background color of the main text area and the ruler bars as a CSS hex string.
• statusBarColor (string) - Determines the background color of the status bar as a CSS hex string.
• editMode (string) - Sets whether the document's text is read-only, can be selected or is editable. Possible values are 'Edit', 'ReadAndSelect', 'ReadOnly' and 'UsePassword'.
• contextMenusEnabled (boolean) - Sets whether a right click opens a context menu or not.
• saveDocumentQuestionDialogEnabled (boolean) - Sets whether a confirmation dialog should be shown before discarding unsaved changes.
• tableGridLines (boolean) - Sets wether table grid lines are shown in the editor or not.
• textFrameMarkerLines (boolean) - Sets whether text frames that have no border line are shown with marker lines.
• controlChars (boolean) - Sets whether control characters are visible or not.
• textFieldsEditable (boolean) - Sets whether text fields are editable or not.
• formattingPrinter (string) - The name of a printer the text dimensions and capabilities of which are used to format the document.
• culture (string) - The culture (e. g. 'de-DE'). Affects date and time string formats, for example.
• uiCulture (string) - The user interface culture (e. g. 'en-US'). Affects the string resource language.
• userNames (string[]) - An array of names specifying users who have access to editable regions. When a document is set to read-only all editable regions that are related to these users can be edited.
• reconnectTimeout (number) - Time in seconds before stopping reconnection attempts after a connection loss.

Events

Because the script containing the main TXTextControl object is loaded in a deferred manner, a global event exists which is fired as soon as the object is available. The event is dispatched on the document object. You can subscribe to it in your component.ts as follows:

@HostListener('document:txDocumentEditorLoaded')
onTxDocumentEditorLoaded() {
   console.log('TXTextControl object exists.');
   TXTextControl.addEventListener("ribbonTabsLoaded", () => console.log('Ribbon tabs are completely loaded.'));
}

Environment Support

• Angular ^15.0.0
• @txtextcontrol/tx-websocket-server ^31.0.1 (or NuGet package TXTextControl.Web 31.2.0)
• TX Text Control .NET Server for ASP.NET 31.0 SP2

Version History

The following list contains all Text Control service pack versions, their release dates and the corresponding npm package versions and relates them to the supported Angular version in each case.

TX 27 SP1 (20.08.19)

• 27.1.0 - 27.1.5: Angular 7
• 27.1.6 - 27.1.12: Angular 8

TX 27 SP2 (04.02.20)

• 27.1.12: Angular 8

TX 27 SP3 (04.05.20)

• 27.1.12: Angular 8

TX 28 (16.03.20)

• 28.0.0: Angular 8

TX 28 SP1 (22.04.20)

• 28.1.1: Angular 8

TX 28 SP2 (25.05.20)

• 28.2.0: Angular 8

TX 28 SP3 (29.07.20)

• 28.3.0: Angular 8

TX 28 SP4 (19.10.20)

• 28.4.0: Angular 8

TX 29 (17.08.21)

• 29.0.0: Angular 8

TX 29 SP1 (20.01.21)

• 29.0.0: Angular 8

TX 29 SP2 (19.04.21)

• 29.0.1: Angular 11

TX 29 SP3 (19.07.21)

• 29.0.2: Angular 11
• 29.0.3: Angular 12

TX 30 (26.11.21)

• 30.0.0: Angular 12

TX 30 SP1 (07.02.22)

• 30.0.1: Angular 13

TX 30 SP2 (02.06.22)

• 30.0.2: Angular 13

TX 30 SP3 (14.09.22)

• 30.0.2: Angular 13

TX 31 (05.09.22)

• 31.0.0 - 31.0.2: Angular 14

TX 31 SP1 (16.12.22)

• 31.0.3 - 31.0.4: Angular 14

TX 31 SP2 (20.02.23)

• 31.2.0 - 31.2.1: Angular 15

TX 32 (13.09.23)

• 32.0.0 - 32.0.1: Angular 15

TX 32 SP1 (22.11.23)

• 32.1.0: Angular 15 - 17

TX 32 SP2 (05.01.24)

• 32.2.0: Angular 15 - 17

TX 32 SP3 (26.04.24)

• 32.3.0 - 32.3.1: Angular 15 - 17

TX 32 SP4 (28.08.24)

• 32.4.0: Angular 15 - 17