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

sh

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

):

html

   width="1000px"

   height="800px"

   webSocketURL="ws://www.server.com:8080/TXWebSocket"

   statusBarColor="#FF00FF"

   [controlChars]="true"

   [userNames]="['user1', 'user2']">





$3



- 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.



$3



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:

javascript

@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.



$3



-

27.1.0 - 27.1.5

: Angular 7

-

27.1.6 - 27.1.12

: Angular 8



$3



-

27.1.12

: Angular 8



$3



-

27.1.12

: Angular 8



$3



-

28.0.0

: Angular 8



$3



-

28.1.1

: Angular 8



$3



-

28.2.0

: Angular 8



$3



-

28.3.0

: Angular 8



$3



-

28.4.0

: Angular 8



$3



-

29.0.0

: Angular 8



$3



-

29.0.0

: Angular 8



$3



-

29.0.1

: Angular 11



$3



-

29.0.2

: Angular 11

-

29.0.3

: Angular 12



$3



-

30.0.0

: Angular 12



$3



-

30.0.1

: Angular 13



$3



-

30.0.2

: Angular 13



$3



-

30.0.2

: Angular 13



$3



-

31.0.0 - 31.0.2

: Angular 14



$3



-

31.0.3 - 31.0.4

: Angular 14



$3



-

31.2.0 - 31.2.1

: Angular 15



$3



-

32.0.0 - 32.0.1

: Angular 15



$3



-

32.1.0

: Angular 15 - 17



$3



-

32.2.0

: Angular 15 - 17



$3



-

32.3.0 - 32.3.1

: Angular 15 - 17



$3



-

32.4.0 - 32.4.1

: Angular 15 - 17



$3



-

33.0.0

: Angular 17 - 19



$3



-

34.0.0`: Angular 18 - 20

TX Text Control HTML5 Document Editor (Angular version)

Prerequisites

Installation

sh

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

):

html

   width="1000px"

   height="800px"

   webSocketURL="ws://www.server.com:8080/TXWebSocket"

   statusBarColor="#FF00FF"

   [controlChars]="true"

   [userNames]="['user1', 'user2']">





$3



- 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.



$3



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:

javascript

@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.



$3



-

27.1.0 - 27.1.5

: Angular 7

-

27.1.6 - 27.1.12

: Angular 8



$3



-

27.1.12

: Angular 8



$3



-

27.1.12

: Angular 8



$3



-

28.0.0

: Angular 8



$3



-

28.1.1

: Angular 8



$3



-

28.2.0

: Angular 8



$3



-

28.3.0

: Angular 8



$3



-

28.4.0

: Angular 8



$3



-

29.0.0

: Angular 8



$3



-

29.0.0

: Angular 8



$3



-

29.0.1

: Angular 11



$3



-

29.0.2

: Angular 11

-

29.0.3

: Angular 12



$3



-

30.0.0

: Angular 12



$3



-

30.0.1

: Angular 13



$3



-

30.0.2

: Angular 13



$3



-

30.0.2

: Angular 13



$3



-

31.0.0 - 31.0.2

: Angular 14



$3



-

31.0.3 - 31.0.4

: Angular 14



$3



-

31.2.0 - 31.2.1

: Angular 15



$3



-

32.0.0 - 32.0.1

: Angular 15



$3



-

32.1.0

: Angular 15 - 17



$3



-

32.2.0

: Angular 15 - 17



$3



-

32.3.0 - 32.3.1

: Angular 15 - 17



$3



-

32.4.0 - 32.4.1

: Angular 15 - 17



$3



-

33.0.0

: Angular 17 - 19



$3



-

34.0.0`: Angular 18 - 20