TX Text Control HTML5 Document Editor

TX Text Control HTML5 Document Editor for Node.js.

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
npm install @txtextcontrol/tx-document-editor
`

Usage

The following example shows how to use the TX Text Control Document Editor in a simple web application using Express as the web server and the template engine Pug.

This example already provides the necessary WebSocket server mentioned in the prerequisites, so you
don't need to create an additional project to run it.

To make the example work, please install the following three packages:

`sh
npm install express
npm install pug
npm install @txtextcontrol/tx-websocket-server
`

Content of index.pug in the views folder:

`pug
html
head
title= title
body
h3= heading
p= text
div(
style='position: absolute; top: 100px; left: 80px; width: 80%; height: 700px'
) !{editor}
`

Content of your application's main js file:

`js
const { WebSocketServer } = require('@txtextcontrol/tx-websocket-server');
const { DocumentEditor } = require('@txtextcontrol/tx-document-editor');
const express = require('express');

const app = express();
const server = app.listen(8080);

app.set('view engine', 'pug');

var wsServer = new WebSocketServer(server);

var editor = new DocumentEditor({
webSocketURL: 'ws://localhost:8080/TXWebSocket'
});

app.get('/', (req, res) => {
res.render('index', {
title: 'Text Control HTML5 Document Editor',
heading: 'Text Control HTML5 Document Editor in Node.js',
text: '(Using the template engine "Pug")',
editor: editor.render()
});
});
`

If you run your application, the editor should now be accessible at http://localhost:8080.

Configuration

The DocumentEditor object can be configured via the optional constructor parameter. This
parameter must be an object. The following properties are recognized:

- webSocketURL (_string_) - The WebSocket URL.
- documentTargetMarkers (_boolean_) - Sets whether markers for hypertext targets are shown
in the editor.
- editMode (_number_ / _string_) - Sets whether the document's text is read-only, can be selected or
is editable. This can either be a string, in which case the possible values are 'Edit',
'ReadAndSelect', 'ReadOnly' and 'UsePassword', or a numerical value, in which case the value
must be one of the values defined in the EditMode enumeration. The EditMode enumeration is also
part of the tx-document-editor package and can be required like this:

`js
const { EditMode } = require('@txtextcontrol/tx-document-editor');
`

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

The render() function takes one optional parameter. This parameter must be an object. The following
properties are recognized:

- dockStyle (_number_) - The docking style. The DockStyle enumeration is also part of the
tx-document-editor package and can be required like this:

`js
const { DockStyle } = require('@txtextcontrol/tx-document-editor');
`

- width (_string_) - The width of the editor (e. g. '1024px').
- height (_string_) - The height of the editor (e. g. '600px').

Environment

- @txtextcontrol/tx-websocket-server ^34.0.0 or higher (or NuGet package TXTextControl.Web 34.0.0 or higher)
- TX Text Control .NET Server for ASP.NET 34.0` or higher