TX Text Control Document Editor (React version)

This library offers a HTML5 based rich text editor for TX Text Control. Give your users an MS Word compatible document editor to create powerful reporting templates anywhere - in any HTML5-based browser including Google Chrome, Firefox, Safari and Internet Explorer.

Requirements

This version requires TX Text Control .NET Server for ASP.NET.

Getting started

Creating a test application

1. Create a new React applicaiton using Vite.js (Select React as the framework and JavaScript as the language):

npm create vite@latest test-app

2. Change into the new directory:

cd test-app

3. Install the TX Text Control Document Editor:

npm i @txtextcontrol/tx-react-document-editor

4. In your App.jsx file, import the DocumentEditor component and add it to the render method:

import DocumentEditor from '@txtextcontrol/tx-react-document-editor'

function App() {
  return (
    <>
      <DocumentEditor 
        style={{ width:"1280px", height:"1024px" }} 
        webSocketURL="wss://backend.textcontrol.com/api/TXWebSocket?access-token=your_trial_token"></DocumentEditor>
    </>
  );
}

5. Start the application:

npm run dev

The TX Text Control Document Editor is now running in your React application. You can now access the editor in your browser at http://localhost:5173.

Possible attributes

• style (object)
  • width (string) - The width of the Document Editor in pixel 'px' or in percentage '%' relative to the container's width.
  • height (string) - The height of the Document Editor in pixel 'px' or in percentage '%' relative to the container's height.
• webSocketURL (string) - The backend server WebSocket URL running TX Text Control .NET Server for ASP.NET.
• 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.
• 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.
• onLoad (function) - The function will be executed as soon as the main 'TXTextControl' object is loaded.