# Document Editor

> Embed a Word-compatible WYSIWYG editor in ASP.NET Core, Angular, React, JavaScript or Blazor: user features, WebSocket backend, packages and JavaScript API.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Overview > Components > Document Editor
- **2035 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/document-editor/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/document-editor/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/document-editor/llms-full.txt

---

The Document Editor is a WYSIWYG word processor that you embed in your web application. Read on for what your users and your code do with it, how its parts work together and which packages and frontends are available. The step-by-step setup is described in [Getting Started: Document Editor](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/llms-full.txt).

### What the Document Editor Is

The Document Editor is an MS Word compatible document editor with a ribbon interface that runs in the browser. Documents are shown page by page with their real layout, including headers, footers, tables and images.

![Document Editor in the browser with the Home tab of the ribbon, the rulers, a business letter with a table on the page and the status bar with section, page, line, column, language and zoom](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/document-editor-letter.71f053d9.webp)

The picture shows the editor filling the browser window, with a DOCX letter loaded. The ribbon tabs above the page hold the editing tools, and the button in the top right corner opens the sidebars, such as Field Navigation. A trial version draws the line "TX Text Control 34.0 trial version" at the top of each page.

It is not a pure client-side component. TX Text Control runs on the server, synchronizes the document and calculates the rendering information for the editor, which is how the browser shows a true WYSIWYG view of the document. Because the editor uses the same document engine as [ServerTextControl](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/servertextcontrol/llms-full.txt) and [MailMerge](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/mailmerge/llms-full.txt), a template created in the editor looks the same when your backend merges it and exports it as PDF or DOCX.

### What Users Do With It

The ribbon bar groups the editing tools in tabs. Users can:

- **Edit documents.** Users open, edit and save documents in formats such as DOCX, RTF, HTML and the internal TX Text Control format, and work with formatting, tables, images, headers and footers.
- **Design templates.** In the **Reporting** tab, users insert merge fields and merge blocks. The available field and block names come from JSON data that your application loads into the editor. The finished template is merged with data on the server.
- **Review documents.** In the **Proofing** tab, users turn on track changes. Insertions and deletions are recorded with the author's name and a timestamp, and users accept or reject them. Users can also add comments to the document.
- **Create forms.** In the **Form Fields** tab, users insert text form fields, check boxes, drop-down and combo box fields, and date fields.
- **Protect content.** In the **Permissions** tab, users set up document protection, for example editable regions that only specific users are allowed to change.
- **Check spelling.** When your backend includes TX Spell .NET (the `TXTextControl.TXSpell.Core.SDK` package) and spell checking is turned on, misspelled words are highlighted as users type.

### What Developers Do With It

- **Add the editor to a page.** Use the ASP.NET Core HTML helper, the Angular or React component, a script in a plain HTML page, or the Blazor component.
- **Load and save documents.** Pass the initial document when the view is rendered, for example with the `LoadText` method of the HTML helper. In the browser, `loadDocument` and `saveDocument` load and save documents from JavaScript. `saveDocument` passes the document to your JavaScript code, which can send it to your backend, for example to store a template. In Blazor, `LoadDocumentAsync` and `SaveDocumentAsync` do the same in C#.
- **Program the document.** The JavaScript API, the global `TXTextControl` object, gives your code access to the document, such as its tables, the current selection and events. All frontends use the same JavaScript API.
- **Provide merge data.** `TXTextControl.loadJsonData` loads JSON data with the structure of your merge data, which fills the lists of the **Reporting** tab.
- **Control editing.** Settings such as the edit mode (`Edit`, `ReadAndSelect`, `ReadOnly` or `UsePassword`) and the user names for editable regions decide what users can change.
- **Customize the interface.** Change the ribbon, the context menus and the language of the user interface. See [Ribbon and UI](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/llms-full.txt).

### How It Works

Three parts work together: the frontend in the browser, the TX Text Control WebSocket middleware in your ASP.NET Core application, and the Document Editor backend `TXTextControl.Web.Server.Core`, a cross-platform .NET process that the hosted service `DocumentEditorWorkerManager` starts with your application. The frontend synchronizes every change with the server over a WebSocket connection, and the middleware forwards it to the backend over TCP. [Document Editor](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/architecture/#document-editor) in Product Architecture explains the chain, and [Document Editor Architecture](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/architecture/llms-full.txt) follows an editing session through it.

### Frontends

The editor is available for ASP.NET Core, Angular, React, plain JavaScript and Blazor, and for Node.js web applications. With ASP.NET Core and Blazor, the frontend and the backend live in the same application; with the other frontends, the frontend is a separate client application that connects to the backend through a WebSocket URL. [Frontends and the ASP.NET Core Backend](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/architecture/#frontends-and-the-asp-net-core-backend) lists how the editor is added in each frontend and which package it needs, and [npm Packages](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/llms-full.txt) describes the Angular, React and Node.js packages.

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

### Backend Packages

Every frontend needs an ASP.NET Core backend with three NuGet packages from the [Text Control Private NuGet Feed](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/nuget/private-feed/llms-full.txt): `TXTextControl.Web` for the WebSocket middleware and the HTML helper, `TXTextControl.Web.DocumentEditor.Backend` for the backend process, and the engine `TXTextControl.TextControl.Core.SDK`. A preview of `TXTextControl.Web.Collaboration`, a package for live collaboration in the ASP.NET Core Document Editor, is available on nuget.org. [Package Overview](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/nuget/packages/#web-packages) describes the packages.

### Key Classes and Objects

| Name | Type | Purpose |
|---|---|---|
| [TXTextControl](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/llms-full.txt) | JavaScript object | The public API of the editor in the browser, used by all frontends |
| [TXTextControl.init](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/init-method/llms-full.txt) | JavaScript method | Creates the editor in a plain HTML page. It takes a [ComponentSettings](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/componentsettings/llms-full.txt) object. |
| [loadDocument](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/loaddocument-method/llms-full.txt) and [saveDocument](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/savedocument-method/llms-full.txt) | JavaScript methods | Load and save the document in the editor |
| [loadJsonData](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/loadjsondata-method/llms-full.txt) | JavaScript method | Loads JSON data that provides the merge field and merge block names |
| [ControlsFactory.TextControl](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/controlsfactory/textcontrol-method/llms-full.txt) | .NET method | Creates the editor in an ASP.NET Core view through `Html.TXTextControl().TextControl()` |
| [TextControlSettings](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/llms-full.txt) | .NET class | The settings of the editor in an ASP.NET Core view |
| [TXTextControl.Web.MVC.TextControl](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrol/llms-full.txt) | .NET class | The editor in an ASP.NET Core view, with methods such as [LoadText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrol/loadtext-method/llms-full.txt) and [LoadDataFromJson](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrol/loaddatafromjson-method/llms-full.txt) |
| `DocumentEditorWorkerManager` | .NET hosted service | Starts and stops the Document Editor backend process with your ASP.NET Core application |

### Example

The backend of the Angular, React and JavaScript tutorials is an ASP.NET Core Web API whose *Program.cs* registers `DocumentEditorWorkerManager` with `AddHostedService` and calls `app.UseWebSockets()` and `app.UseTXWebSocketMiddleware()`; [Create the Backend](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/#create-the-backend) shows the file. In the browser, your code waits for the `textControlLoaded` event and then uses the JavaScript API, for example to load a document, as [Create the HTML Page](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/javascript/#create-the-html-page) shows. The complete tutorials are in [Getting Started: Document Editor](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/llms-full.txt).

### Next Steps

- [Getting Started: Document Editor with ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt) — create your first application with the editor.
- [Document Editor](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/llms-full.txt) — loading and saving, formatting, fields, track changes, the ribbon and the JavaScript API in detail.
- [MailMerge](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/mailmerge/llms-full.txt) — merge templates designed in the editor with data.
- [Document Viewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/document-viewer/llms-full.txt) — the read-only component for viewing, annotating and signing documents.

---

## Nearby

- **Previous:** [Components](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/llms-full.txt)
- **Next:** [Document Viewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/document-viewer/llms-full.txt)