TypeScript icon, indicating that this package has built-in type declarations

    30.0.2 • Public • Published

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


    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


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

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

    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.


    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:

    onTxDocumentEditorLoaded() {
       console.log('TXTextControl object exists.');
       TXTextControl.addEventListener("ribbonTabsLoaded", () => console.log('Ribbon tabs are completely loaded.'));




    npm i @txtextcontrol/tx-ng-document-editor

    DownloadsWeekly Downloads






    Unpacked Size

    7.63 MB

    Total Files


    Last publish


    • thomerow
    • bjoerntx
    • schedo