Need private packages and team management tools?Check out npm Teams »

@txtextcontrol/tx-ng-document-editor

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

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

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

Keywords

none

Install

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

DownloadsWeekly Downloads

71

Version

28.0.0

License

none

Unpacked Size

13.9 MB

Total Files

50

Last publish

Collaborators

  • avatar
  • avatar