TX Text Control for Node.js

TX Text Control for Node.js is used to integrate the TX Text Control HTML5-based document editor in Node.js applications.

In this tutorial, a Node.js application is created that hosts the WebSocketServer and uses the Node.js component in the same project. For demo purposes, a demo server backend is used for the required synchronization service that synchronizes the document in order to provide the WYSIWYG rendering.

In order to deploy your own project, a synchronization service must be hosted and the serviceAddress must be changed.

Getting Started

This tutorial shows how to create your first Node.js application using the TX Text Control document editor.

Prerequisites

1. Install Node.js® and npm, if not done before.

Creating the Node.js Project

1. Open a Node.js command prompt, create an empty folder called "node-editor", navigate into and type in the following command to install the document editor:

   npm install @txtextcontrol/tx-document-editor

2. Type in the following command to install Express, the minimalist web framework for node:

   npm install express

3. Pug is a popular template engine that is installed using this command:

   npm install pug

4. Additionally, we need to install the TX Text Control WebSocket Server package:

   npm install @txtextcontrol/tx-websocket-server

5. Create a folder views by typing in this command>

   mkdir views

6. Open the project root folder in Visual Studio Code by typing in the following command:

   code .

7. In Visual Studio Code, create a new file named index.pug in the newly created views folder and paste the following code into the file:

   • HTML

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

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

   

8. Create a new file named main.js in the project's root folder, copy the following code into this JavaScript file and save it:

   • JavaScript

   ​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()
      });
   });

   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() }); });

9. Back in the command prompt, start the Node.js application by typing in the following command:

   node main.js

10. Open a browser and navigate to http://localhost:8080 to see the application.