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.
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.
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.
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>
-
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.
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.'));
}
- Angular
^15.0.0
-
@txtextcontrol/tx-websocket-server ^31.0.1
(or NuGet packageTXTextControl.Web 31.2.0
) - TX Text Control .NET Server for ASP.NET
31.0 SP2
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.
-
27.1.0
-27.1.5
: Angular 7 -
27.1.6
-27.1.12
: Angular 8
-
27.1.12
: Angular 8
-
27.1.12
: Angular 8
-
28.0.0
: Angular 8
-
28.1.1
: Angular 8
-
28.2.0
: Angular 8
-
28.3.0
: Angular 8
-
28.4.0
: Angular 8
-
29.0.0
: Angular 8
-
29.0.0
: Angular 8
-
29.0.1
: Angular 11
-
29.0.2
: Angular 11 -
29.0.3
: Angular 12
-
30.0.0
: Angular 12
-
30.0.1
: Angular 13
-
30.0.2
: Angular 13
-
30.0.2
: Angular 13
-
31.0.0
-31.0.2
: Angular 14
-
31.0.3
-31.0.4
: Angular 14
-
31.2.0
-31.2.1
: Angular 15
-
32.0.0
-32.0.1
: Angular 15
-
32.1.0
: Angular 15 - 17
-
32.2.0
: Angular 15 - 17
-
32.3.0
-32.3.1
: Angular 15 - 17
-
32.4.0
: Angular 15 - 17