Tutorial: Edit MS Word Documents in Any Browser

With our latest release TX Text Control .NET Server for ASP.NET, 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.

   

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.

   

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.

   

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.

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

Download trial version