In a previous tutorial, you learned how to create your first Angular application using the TX Text Control Document Editor.

This tutorial shows how and when to use the various attributes when adding a Document Editor to your app.component.html.

Attributes

After adding the document editor to the app.component.html, your code looks similar to this:

<tx-document-editor
width="1000px"
height="500px"
webSocketURL="wss://backend.textcontrol.com?access-token=yourtoken"
statusBarColor="#FF00FF"
[userNames]="['user1', 'user2']"
[controlChars]="true"
[reconnectTimeout]=10>
</tx-document-editor>
view raw test.html hosted with ❤ by GitHub

Most settings can be set using the JavaScript API, but some must be and some can be adjusted during the initialization of the document editor. The only mandatory attributes are width, height and webSocketURL. Other attributes are optional and are used to define the style, the edit mode or to define user names for track changes and document protection modes.

Attributes Usage

All string based attributes must be provided in the following way:

attribute_name="attribute_value"
view raw test.js hosted with ❤ by GitHub

All other types including booleans, numbers and string arrays are provided with a square bracket in the following format:

[attribute_name]="attributevalue"
[attribute_name]=attributevalue
[attribute_name]="['attributevalue', 'attributevalue']"
view raw test.js hosted with ❤ by GitHub

Available Attributes

The following table lists all available attributes including the value type and the description.

Key Value Type Value description
width string The width of the component (e.g. "1000px").
height string The height of the component (e.g. "800px").
webSocketURL string A valid URL that points to your used backend.
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 (e. g. "#FF00FF")
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 whether 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.