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 @thomerow/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 @thomerow/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('@thomerow/tx-websocket-server');
const { DocumentEditor } = require('@thomerow/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 - The WebSocket URL.

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

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

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

• width (string) - The width of the editor (e. g. '1024px').

• height (string) - The height of the editor (e. g. '600px').