# Tutorial: Edit MS Word Documents in Any Browser

> TX Text Control .NET Server provides an HTML5 WYSIWYG editor for Chrome, Firefox, Safari, and Internet Explorer. Setting up a browser-based word processor requires adding the TextControl component in Visual Studio, configuring document and image directories via SetFileDirectoryAsync.

- **Author:** Bjoern Meyer
- **Published:** 2014-11-19
- **Modified:** 2026-03-05
- **Description:** TX Text Control .NET Server provides an HTML5 WYSIWYG editor for Chrome, Firefox, Safari, and Internet Explorer. Setting up a browser-based word processor requires adding the TextControl component in Visual Studio, configuring document and image directories via SetFileDirectoryAsync.
- **3 min read** (509 words)
- **Tags:**
  - Tutorial
- **LLMs.txt URL:** https://www.textcontrol.com/blog/2014/11/19/tutorial-edit-ms-word-documents-in-any-browser/llms.txt
- **LLMs-full.txt URL:** https://www.textcontrol.com/blog/2014/11/19/tutorial-edit-ms-word-documents-in-any-browser/llms-full.txt
- **Canonical URL:** https://www.textcontrol.com/blog/2014/11/19/tutorial-edit-ms-word-documents-in-any-browser/

---

With our latest release TX Text Control .NET Server, we released a fully featured, WYSIWYG rich text editor for ASP.NET that can be used in any HTML5 capable browser such as Firefox, Chrome, Safari and Internet Explorer.

This tutorial shows how to use the HTML5 based TextControl to create a Web based word processor and template designer. Using the built-in *File* menu, you can load and save documents from and to a specified folder.

Create Your Application
-----------------------

1. Open Visual Studio and create a new *ASP.NET Empty Web Application*.
    
    ![Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2014/11/19/a/assets/tutorial_html5_1.webp "Text Control")
2. In the *Solution Explorer*, select the project and choose *Add New Item...* from the *Project* main menu. In the opened dialog *Add New Item*, select *Web Form* and confirm with *Add*.
    
    ![Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2014/11/19/a/assets/tutorial_html5_2.webp "Text Control")
3. In the *Solution Explorer*, select the newly created *Web Form* and choose *Designer* from the *View* main menu.
    
    Find the **TextControl** component in the *Toolbox* and drag and drop an instance onto the *Designer* form.
    
    ![Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2014/11/19/a/assets/tutorial_html5_3.webp "Text Control")
4. Select *TextControl1* on the form and browse for the *Dock* property in the *Properties* window and set this to *Window*.
5. In the *Solution Explorer*, select the project and choose *New Folder* from the *Project* main menu. Type in a name for the folder (e.g. "documents").
6. Select the newly created folder and choose *Add Existing Item...* from the *Project* main menu. In the opened dialog box, navigate to the following folder:
    
    *%USERPROFILE%\\Documents\\TX Text Control 21.0.NET Server for ASP.NET\\Samples\\ASP.NET\\CSharp\\Documentation Tutorials\\HTML5 Web Editor\\Tutorial\\documents*
    
    Select all files and and confirm with *Add*.
7. Repeat the above 2 steps with another folder for the images (e.g. "images"). Sample images can be found in the following directory:
    
    *%USERPROFILE%\\Documents\\TX Text Control 21.0.NET Server for ASP.NET\\Samples\\ASP.NET\\CSharp\\Documentation Tutorials\\HTML5 Web Editor\\Tutorial\\images*
8. Select the *Web Form* and switch to code view using the *Code* menu item from the *View* main menu. Add the following event handler code:
    
    ```
    [C#]
    protected void Page_Load(object sender, EventArgs e)
    {
    TextControl1.SetFileDirectoryAsync(Server.MapPath("documents"),
    TXTextControl.Web.FileType.Document);
    
    TextControl1.SetFileDirectoryAsync(Server.MapPath("images"),
    TXTextControl.Web.FileType.Image);
    }
    ```
    
     ```
    [Visual Basic]
    Protected Sub Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.Load
    TextControl1.SetFileDirectoryAsync(Server.MapPath("documents"),
    TXTextControl.Web.FileType.Document)
    
    TextControl1.SetFileDirectoryAsync(Server.MapPath("images"),
    TXTextControl.Web.FileType.Image)
    End Sub
    ```
9. Compile and start the application.

Using the integrated *File* ribbon menu, you can load and save documents from and to your specified *documents* folder.

![Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2014/11/19/a/assets/tutorial_html5_5.webp "Text Control")

Simply download the 30-day trial version and try the above tutorial on your own.

[Download trial version ](https://www.textcontrol.com/product/tx-text-control-dotnet-server/download/ "Download trial version")

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [Windows Forms Tutorial: Create Your First Windows Forms C# Application](https://www.textcontrol.com/blog/2024/08/26/windows-forms-tutorial-create-your-first-windows-forms-csharp-application/llms.txt)
- [How to Mail Merge MS Word DOCX Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/16/how-to-mail-merge-ms-word-docx-documents-in-aspnet-core-csharp/llms.txt)
- [Creating an Angular Document Editor Application with a Node.js WebSocket Server](https://www.textcontrol.com/blog/2023/08/24/creating-an-angular-document-editor-application-with-a-nodejs-websocket-server/llms.txt)
- [Adding SVG Watermarks to Documents](https://www.textcontrol.com/blog/2022/01/28/adding-svg-watermarks-to-documents/llms.txt)
- [Using MailMerge in ASP.NET Core 6 Web Applications](https://www.textcontrol.com/blog/2022/01/27/using-mailmerge-in-aspnet-core-6-web-applications/llms.txt)
- [DocumentViewer for React Prerelease](https://www.textcontrol.com/blog/2020/10/27/document-viewer-for-react-prerelease/llms.txt)
- [New DocumentViewer Signature Tutorial Sample](https://www.textcontrol.com/blog/2020/08/18/new-documentviewer-signature-tutorial-sample/llms.txt)
- [Creating an ASP.NET MVC DocumentViewer Application With Razor](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-mvc-documentviewer-application-with-razor/llms.txt)
- [Creating Your First Windows Forms Application with C#](https://www.textcontrol.com/blog/2020/01/01/creating-your-first-windows-forms-application-with-csharp/llms.txt)
- [Creating Your First WPF Application](https://www.textcontrol.com/blog/2020/01/01/creating-your-first-wpf-application/llms.txt)
- [Creating a WPF Ribbon Application](https://www.textcontrol.com/blog/2020/01/01/creating-a-wpf-ribbon-application/llms.txt)
- [Integrate Document Editing into any HTML Client using the HTML Widget](https://www.textcontrol.com/blog/2020/01/01/integrate-document-editing/llms.txt)
- [Creating an ASP.NET MVC Application With Razor](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-mvc-application-with-razor/llms.txt)
- [Creating A Windows Forms Ribbon Application](https://www.textcontrol.com/blog/2020/01/01/creating-a-windows-forms-ribbon-application/llms.txt)
- [Creating Your First ASP.NET Reporting Application](https://www.textcontrol.com/blog/2020/01/01/creating-your-first-aspnet-reporting-application/llms.txt)
- [Creating an ASP.NET Web Forms AJAX Application](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-web-forms-ajax-application/llms.txt)
- [Creating a WebSocket Server Project with Node.js](https://www.textcontrol.com/blog/2020/01/01/creating-a-websocket-server-project-with-nodejs/llms.txt)
- [Creating an Angular Document Editor Application](https://www.textcontrol.com/blog/2020/01/01/creating-an-angular-document-editor-application/llms.txt)
- [ReportingCloud .NET Core Quickstart Tutorial](https://www.textcontrol.com/blog/2019/07/24/reportingcloud-dotnet-core-quickstart-tutorial/llms.txt)
- [Document Permissions and Password Encryption](https://www.textcontrol.com/blog/2019/07/05/document-permissions-and-password-encryption/llms.txt)
- [New Online Sample: Build your First Report](https://www.textcontrol.com/blog/2019/07/03/build-your-first-report/llms.txt)
- [Create your First Document with ReportingCloud](https://www.textcontrol.com/blog/2019/02/19/create-your-first-document-with-reportingcloud/llms.txt)
- [MailMerge: Starting Each Merge Block on a New Page](https://www.textcontrol.com/blog/2016/09/09/mailmerge-starting-each-merge-block-on-a-new-page/llms.txt)
- [Windows Forms and WPF: End a List on Return when Line is Empty](https://www.textcontrol.com/blog/2016/08/26/windows-forms-and-wpf-end-a-list-on-return-when-line-is-empty/llms.txt)
- [Using IFormattedText Objects to Access Elements Across All TextParts in a Document](https://www.textcontrol.com/blog/2016/08/25/using-iformattedtext-objects-to-access-elements-across-all-textparts-in-a-document/llms.txt)
