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

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:

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

Content of index.pug in the views folder:

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:

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:

  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:

  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 ^32.4.0 (or NuGet package TXTextControl.Web 32.4.0)
• TX Text Control .NET Server for ASP.NET 32.0 SP4