Document Editor Tutorials — TX Text Control .NET Server

The Document Editor is an MS Word compatible, WYSIWYG document editor that runs in the browser and uses a ribbon interface. Learn how the editor works, then build your first application with ASP.NET Core, Angular, React, plain JavaScript, Blazor or Node.js.

What the Document Editor Is

The Document Editor gives your users a word processor inside your web application. Documents are shown page by page with their real layout, and the ribbon bar groups the editing tools in tabs. Your code loads, saves and changes documents through the JavaScript API, the TXTextControl object, which is the same in all frontends.

The Document Editor in the browser with a business letter loaded: the ribbon bar with the Home tab active, the ruler, a page with a heading, an address, a line-item table and body text, and the status bar with section, page, line, column, language and zoom.

How It Works

The Document Editor is not a pure client-side component. The frontend in the browser opens a WebSocket connection to your ASP.NET Core application, where the Document Editor backend synchronizes the document, so every frontend needs this backend. In a Node.js application, a Node.js WebSocket server takes the place of the ASP.NET Core application and connects to the same backend process. How It Works in the Overview explains the parts, and Frontends and the ASP.NET Core Backend lists the packages of each frontend.

Choose a Frontend

Frontend	Choose it when	How the editor is added
ASP.NET Core	You build an ASP.NET Core MVC application and want the fastest start.	`Html.TXTextControl().TextControl()` HTML helper in a view
Angular	Your client application is written in Angular.	`tx-document-editor` component
React	Your client application is written in React.	`DocumentEditor` component
JavaScript	You use no framework, or a framework without a dedicated package.	Script tag and `TXTextControl.init()`
Blazor	You build a Blazor Web App with interactive server rendering and want to load and save documents in C#.	`DocumentEditor` Razor component
Node.js	Your web application runs on Node.js instead of ASP.NET Core.	`DocumentEditor` class, whose `render()` method writes the editor into a page

If you are not sure, start with ASP.NET Core. It needs only one project, and the JavaScript you learn there works the same way in every other frontend.

Pages in This Section

ASP.NET Core: create an ASP.NET Core MVC application that hosts the backend and shows the editor in a view.
Angular: create an ASP.NET Core backend and an Angular application that uses the Angular component.
React: create an ASP.NET Core backend and a React application that uses the React component.
JavaScript: load the editor into a plain HTML page and program it with the JavaScript API.
Blazor: add the Blazor component to a Blazor Web App and load documents from C#.
Node.js: serve the editor from an Express application with the Node.js packages and run the backend next to it.