Document Editor Examples
Half of the online demos of TX Text Control .NET Server show the Document Editor, and many sample projects on GitHub build on it. The demos run in the browser and show their code; the sample projects on GitHub are complete applications for ASP.NET Core, Angular and Blazor that you can clone. For each sample, the table names the TX Text Control version it was written for, because the setup of the editor's backend changed with version 34.0.
Before You Run an Older Sample
Since version 34.0, the TXTextControl.Web.DocumentEditor.Backend package starts the backend process of the editor with the hosted service DocumentEditorWorkerManager. Samples written for earlier versions, and some written for 34.0, reference only TXTextControl.Web and call app.UseTXWebSocketMiddleware() without starting a backend. Add the backend package and register DocumentEditorWorkerManager, as From the Old Document Editor Backend to the Backend Package describes, and update the packages to the current version, as GitHub Examples explains.
Online Demos
Each demo shows its view, controller and JavaScript on the Code tab. All demos run on the current version:
| Example | What it shows | Where |
|---|---|---|
| Concept | The Document Editor in an ASP.NET Core view: editing Word documents in the browser | Concept |
| Loading from a view | A document loaded when the view is rendered: DOCX, RTF, HTML, PDF or the TX Text Control format | Loading from View |
| Loading from a controller | A document that a controller returns and the page loads | Loading from Controller |
| Loading from JavaScript | A base64-encoded document loaded with the JavaScript API | Loading from JavaScript |
| Server-side loading and saving | The document of an open editor loaded and saved on the server with the WebSocketHandler | Loading from WebSocketHandler |
| PDF export | The document exported as PDF, once through a controller and once in JavaScript | Export PDF using Controller, Export PDF JavaScript |
| Selections and formatting | Reading and changing the selection and its character formatting with the JavaScript API | Character Formatting and Selections |
| Styles | Finding, applying and changing paragraph styles | Formatting Styles |
| Tables | Inserting and formatting tables and cells | Tables |
| Headers and footers | Headers and footers of a document | Headers and Footers |
| Form fields | Check boxes, drop-down lists and text form fields, and their export to a fillable PDF form | Form Fields, Export Form Fields |
| Find and replace | The built-in Find and Replace dialog box, and searching and replacing text from JavaScript | Find and Replace |
| Table of contents | A table of contents generated from the structure levels of the paragraphs, updated and read as a list of entries | Table of Contents |
| Form fields and formulas | A form whose conditional instructions and table formulas calculate totals from the values users enter | Form Fields and Formulas |
| Track changes | Reviewing tracked changes and their details | Track Changes |
| Comments | Comments compatible with MS Word | Comments |
| Document protection | Restricting what users can change | Document Protection |
| Spell checking | Spell checking with TX Spell .NET | Spell Checking |
| Signature fields | Signature fields for signing in the Document Viewer and in PDF documents | Signature Fields |
| Merge fields by drag and drop | A custom sidebar from which users drag merge fields into the template | Drag and Drop Fields |
| Ribbon | Tabs, groups and buttons of the ribbon changed through the DOM and the JavaScript API | Modify the RibbonBar |
| Rulers and status bar | The rulers and the status bar of the editor shown and hidden | Customize Toolbars |
| Minimal toolbar | The ribbon replaced by a small toolbar | Minimal Editor Toolbar |
| Error handling | Errors of asynchronous JavaScript API calls | Asynchronous Error Handling |
The navigation of the demo site lists further demos of formatting, images, sections, charts, barcodes, footnotes, watermarks and more. Demos of template design and merging are listed in Mail Merge Examples.
ASP.NET Core Samples
| Example | What it shows | Where |
|---|---|---|
| Layouts | Five ways to place the editor in an MVC application: full screen, modal dialog, sidebar, split panel and tabs, as described in 5 Layout Patterns for Integrating the TX Text Control Document Editor in ASP.NET Core C#. .NET 10, version 34.0 with the backend package | TXTextControl.DocumentEditor.Views |
| Collaboration preview | Several users in one document, with rooms, sharing links and presence, through the preview package TXTextControl.Web.Collaboration, as described in Introducing TX Text Control Web Collaboration Preview for ASP.NET Core. .NET 10, version 34.0 with the backend package | TXTextControl.Web.Collaboration.TestApp |
| Document repository | A file-based document repository with versions, edited in the Document Editor, as described in File Based Document Repository with Version Control in .NET with TX Text Control. .NET 10, version 34.0 with the backend package | TXTextControl.DocumentRepository.Demo |
| Custom backstage | A custom File tab that loads DOCX, RTF, TX and PDF documents through a controller, as described in Build a Custom Backstage View in ASP.NET Core with TX Text Control. Version 34.0, without the backend package | TXTextControl.Web.Backstage |
| Auto-save | Documents saved on the server regularly with the WebSocketHandler and a background service, as described in Best Practices: Reliable Auto-Save in TX Text Control Using the WebSocketHandler and Background Services. Version 33.0 | TXTextControl.Web.Core.Reconnect |
| Format painter | Copying formatting from one selection to another with the JavaScript API, as described in Format Painter in ASP.NET Core: Building Custom Text Formatting with TX Text Control. Version 33.0 | TXTextControl.Web.JS.FormatPainter |
| Editor and viewer in one view | Editing a document and previewing the result in the Document Viewer on the same page, as described in ASP.NET Core: Use the Document Editor and Viewer in the Same Razor View. Version 33.0 | TXTextControl.Web.LivePreview |
| Document protection by role | User names, edit modes and editable regions for different roles, as described in Document Protection in ASP.NET with TX Text Control: Healthcare Use Cases. Version 32.0 | TXTextControl.Web.Core.DocProtectionApp |
| Contextual toolbar | A toolbar that appears for the selected form field, as described in Document Editor: Implementing a Contextual Toolbar. Version 33.0 | TextControl.Web.MVC.ContextToolbar |
| Editor in tabs | One editor instance reused in Bootstrap tabs, as described in Reusing TXTextControl Instances in Bootstrap Tabs. Version 33.0 | TextControl.Web.MVC.Tabs |
Angular and Blazor Samples
| Example | What it shows | Where |
|---|---|---|
| Angular: one editor across routes | A persistent editor that moves between routes instead of being created again, as described in Reuse Persistent Document Editor Components in Angular SPA Applications. Angular 19, npm packages of version 33.0 | TXTextControl.Angular.SPA |
| Angular: access tokens | A security middleware in the backend that checks the access token of the editor, as described in Implementing a Security Middleware for Angular Document Editor Applications in C#. Version 32.0 | TXTextControl.Angular.Security |
| Angular: loading and saving | Documents loaded and saved asynchronously through an ASP.NET Core Web API, as described in Asynchronous Loading and Saving in Angular Document Editor with an ASP.NET Core Web API. Version 32.0 | TXTextControl.Web.Core.Angular.Loading.List |
| Blazor: editor component | The DocumentEditor component of TXTextControl.Web.Blazor.DocumentEditor loading and saving documents for a mail merge, as described in TX Text Control for Blazor: Mail Merge Integration Tutorial. Version 33.0 | TXTextControl.Web.Blazor.MailMerge |
| Blazor Server with JavaScript interop | The editor in a Blazor Server application on .NET 8 through JavaScript interop instead of the component, as described in Using TX Text Control in a Blazor Server App with .NET 8. Version 32.0 | TXTextControl.Server.Blazor.DotNet8 |
Angular and Blazor in the Integration Guide describe the current setup of both frameworks.
React and JavaScript Articles
For React and plain JavaScript, the articles below hold their code in the article itself, without a repository to clone:
| Example | What it shows | Where |
|---|---|---|
| React | The editor in a React application with the React package | Using the TX Text Control Document Editor in a React Application |
| React with ASP.NET Core | The editor in the React and ASP.NET Core template of Visual Studio | Using the Document Editor in an ASP.NET Core React Application |
| Context menu | Adding and removing entries of the context menu with JavaScript | Manipulating the Context Menu in the Document Editor using JavaScript |
| Single-page applications | Removing the editor with removeFromDom when a view closes | Using the Document Editor in SPA Applications using the removeFromDom Method |
| Comments API | Working with comments in the JavaScript API | Comments JavaScript API: Useful Tips and Tricks |
React and JavaScript in the Integration Guide describe the current setup.
Next Steps
- Document Viewer Examples: demos and samples of the Document Viewer.
- Mail Merge Examples: template design in the editor and merging on the server.
- Getting Started: a first application with the Document Editor.
- Document Editor: the features of the editor in detail.