ASP.NET Web Forms Document Editor

The HTML5 Web Editor is an ASP.NET server control that allows the integration of a fully-featured WYSIWYG word processor and template designer in ASP.NET Web applications.

Technical Considerations - The Concept Explained

True WYSIWYG - Server Document Synchronization

The HTML5 Web Editor consists of two parts: The ASP.NET server control Web.TextControl that provides the client-interface and user experience and the TX Text Control Web Server running as a Windows Service hosted on a Web server. The TX Text Control Web Server engine is used to synchronize the document with the server in order to provide a consistent WYSIWYG text rendering.

Image

Zero Footprint - No Plug-Ins

The client side control is completely based on HTML5 and Javascript and doesn't require any client-side plug-ins. No browser or system security settings are required to run the control. The end-user does not need to confirm any downloads or settings and requires only an HTML5-enabled browser such as Firefox, Chrome, Safari or Internet Explorer.

Users want to seamlessly access and share content with others without any limitations when it comes to devices, hardware or software. A zero footprint editor addresses those requirements using the client-server visualization and synchronization architecture and uses the standard, modern browsers to enable editing in real-time.

  • Zero installation: No application, plug-in or applet must be installed on the client. The native browser and the integrated hardware-accelerated HTML5 Canvas is enough to provide the editing capabilities.
  • No requirements: There are no OS specific requirements for the HTML5 Web Editor that uses the browser to provide the optimal view and editing capabilities.
  • Document streaming: The document itself won't be downloaded to the client. Built on a streaming concept, it loads content on-demand, instead of downloading the complete document. This enables users to access documents with hundreds of pages at the same performance like for smaller documents.

Supported File Formats

In contrast to HTML-based editors, the documents do not need to be converted to HTML for editing. HTML is limited and doesn't provide page-oriented features such as headers and footers or sections. Using the TX Text Control HTML5 Web Editor, documents of all supported formats such as DOC, RTF, DOCX, HTML or PDF can be directly loaded and edited. It gives end-users a consistent, MS Word-like interface for all document types and platforms. The HTML5 Web Editor provides the same user experience like TX Text Control for other platforms including Windows Forms and WPF. This enables developers to provide the same look and feel for both Windows and ASP.NET Web applications.

Security Considerations - Secure Your Documents

Security is a major concern when editing documents on the Internet. Web.TextControl supports the Secure Sockets Layer (SSL) to provide communication security. Additionally, thanks to the client-server visualization and synchronization architecture, the document is never available client-side. If not required, the user has no access to the content of the document and the document doesn't exist client-side. This enables developers to provide a secure interface to manipulate highly confidential documents in browsers without sending those documents and the content using the Internet.

Typical Applications - When to Use It?

The HTML5 Web Editor is used in all types of applications where documents and templates are being created. The MS Word-like interface gives users a consistent and well known user experience.

Image

Reporting and Mail Merge Template Creation

The most typical application is the creation of templates for the Text Control Reporting engine DocumentServer.MailMerge. The ribbon tab Reports is designed to insert merge fields and merge blocks compatible to the reporting classes of TX Text Control.

Image

Conventional banded report designers are complex - Text Control reporting is easy to understand and thanks to WYSIWYG, the template is rendered exactly the same like on paper or in an Adobe PDF. This concept allows developers to deploy a reporting system where end-users are able to create and modify MS Word compatible templates across all platforms, devices and browsers.

The following illustration gives an overview of the typical process: Templates are created in Windows or Web applications, stored and merged on a server using the Text Control Reporting engine DocumentServer.MailMerge. Resulting documents can be exported to Adobe PDF or all other supported formats, printed and displayed in a browser.

Image

Online Document Editing

Create, modify and access your documents wherever you go - simply using a browser. Integrate a true WYSIWYG word processor into your ASP.NET Web applications and provide your users an MS Word-like interface to edit documents.

In combination with the non-UI component ServerTextControl, you can prepare documents in 'code-behind', present it to your users and process the final document in your application. Pre-populate merge fields, let the user modify the resulting document online and create an Adobe PDF document on your server. The possibilities are endless once you start using it.

Fundamental Concepts: Loading and Saving Documents

Documents can be easily loaded in the ASP.NET code-behind code using the Web.TextControl.LoadText and Web.TextControl.SaveText methods that accepts file names, FileStreams and memory variables such as byte and string arrays.

To load a document from a physical file, the following code is required:

TextControl1.LoadText(Server.MapPath("/documents/sample.docx"),
                TXTextControl.Web.StreamType.WordprocessingML);
TextControl1.LoadText(Server.MapPath("/documents/sample.docx"), _
                TXTextControl.Web.StreamType.WordprocessingML)

In order to save a document, the SaveText method is used:

TextControl1.SaveText(Server.MapPath("/output/" + sFilename),
              TXTextControl.Web.StreamType.WordprocessingML);
TextControl1.SaveText(Server.MapPath("/output/" + sFilename), _
              TXTextControl.Web.StreamType.WordprocessingML)

Web.TextControl must be initialized completely in order to accept LoadText calls. Therefore, it exposes another Load method: Web.TextControl.LoadTextAsync. This method loads the text asynchronously when the HTML5 Web Editor is initialized and loaded completely.

In order to load a document in the Page_Load event of an ASPX Web Form, the following code is used:

protected void Page_Load(object sender, EventArgs e)
{
    TextControl1.LoadTextAsync(Server.MapPath("/documents/template.docx"),
        TXTextControl.Web.StreamType.WordprocessingML);
}
Protected Sub Page_Load(sender As Object, e As EventArgs)
    TextControl1.LoadTextAsync(Server.MapPath("/documents/template.docx"), _
        TXTextControl.Web.StreamType.WordprocessingML)
End Sub

Web.TextControl is updated and synchronized with the server automatically using the Web Sockets protocol. In case, you want to use other server-side (runat="server") elements such as buttons on the same form, make sure that they are embedded in an AJAX UpdatePanel and doesn't post back the complete page. A typical body would look like this:

<body>
 <form id="form1" runat="server">
  <div>
   <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
     <asp:Button ID="Button1" runat="server" Text="Load Document"/>
    </ContentTemplate>
   </asp:UpdatePanel>
   <cc1:TextControl ID="TextControl1" runat="server"/>
  </div>
 </form>
</body>

Loading and saving documents is shown in detail in the Sample Explorer that is explained in the article Example - Loading and Saving.

Fundamental Concepts: The Data Source

The most typical application is the creation of templates for the Text Control Reporting engine DocumentServer.MailMerge. The ribbon tab Reports is designed to insert merge fields and merge blocks compatible to the reporting classes of TX Text Control.

Image

The drop-down buttons Select Master Table, Insert Merge Field and Insert Merge Block are pre-filled with items of a specific Database Excerpt XML file that can be loaded programmatically.

Image

This XML database file contains table definitions, relations and row excerpts to provide a preview of the report. This XML file can be easily created using the Windows version of the template designer TX Text Control Words. To create such an XML file, follow the next easy steps:

1. Open TX Text Control Words that is located in your Windows start menu or start screen

Image

2. Open the Reports tab and choose Data Source from the Data Source drop-down button.

Image

4. Follow the next steps and instructions of the Choose Data Source dialog to open your preferred data source.

Image

5. If your data source has been added successfully, you can save the excerpt using the Save Excerpt menu item of the Data Source drop-down button. In the opened dialog Save Data Base Excerpt, select the root table and set the maximum number of exported rows. Then select an export file name and confirm with OK.

Image

6. This XML file can be loaded using the LoadXMLDatabase method of Web.TextControl:

TextControl1.LoadXMLDatabase("datasource_excerpt.xml");
TextControl1.LoadXMLDatabase("datasource_excerpt.xml")

Additionally, the data source can be also loaded from an XMLDocument or FileStream and a DataSet can be directly loaded using the LoadDataSet method.

Fundamental Concepts: Creating Templates

Once a data source is added, the drop-down buttons are active and pre-filled with the available merge fields, merge blocks and master tables.

1. Select your master table using the drop-down button Select Master Table.

2. Select a merge field from the Insert Merge Field drop-down button to insert the field at the current input position.

Image

Repeat step 2 with all your required fields. Design your template, insert your headers and footers, sections or other document elements as desired.

3. Press the Preview Merge Fields toggle button to preview your template.

Image

4. Save the document in the formats RTF, DOC, DOCX or TX.

This template can be merged using the Text Control Reporting engine DocumentServer.MailMerge. The reporting concept, required classes and examples are explained in the chapter Reporting and Mail Merge (DocumentServer.MailMerge).

Fundamental Concepts: Programming API

The Web.TextControl editor offers an API that helps to manipulate the content programmatically. In combination with a server-side ServerTextControl instance, a Web.Selection object can be edited and passed back the editor.

Additionally, several client-side events are available to interact with merge fields. This allows the insertion and manipulation of merge fields using your own interface.

Server-side API (Selection class)

Server-side, the Web.TextControl provides a Web.Selection object that is used to get and set the current selection in the document. A Selection object is available for each TextPart object including the Web.MainText, Web.TextFrame and Web.HeaderFooter objects.

In order to activate the HeaderFooter of a document, the following code can be used:

foreach (IFormattedText textPart in TextControl1.TextParts)
{
    if (textPart.GetType() == typeof(TXTextControl.Web.HeaderFooter))
    {
        TextControl1.TextParts.Activate(textPart);
        break;
    }
}
For Each textPart As IFormattedText In TextControl1.TextParts
    If textPart.[GetType]() = GetType(TXTextControl.Web.HeaderFooter) Then
        TextControl1.TextParts.Activate(textPart)
        Exit For
    End If
Next

The following code shows the combination of the Web.Selection and the ServerTextControl. A new ServerTextControl instance is created and a new MergeField is added to the document. The results are loaded back into the current selection of the Web.TextControl.

using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
{
    tx.Create();

    MergeField newField = new MergeField();
    newField.Name = "TextField1";
    newField.Text = "New TextField";

    tx.ApplicationFields.Add(newField.ApplicationField);

    byte[] data;
    tx.Save(out data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
    TextControl1.Selection.Load(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);
}
Using tx As New TXTextControl.ServerTextControl()
    tx.Create()

    Dim newField As New MergeField()
    newField.Name = "TextField1"
    newField.Text = "New TextField"

    tx.ApplicationFields.Add(newField.ApplicationField)

    Dim data As Byte()
    tx.Save(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat)
    TextControl1.Selection.Load(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat)
End Using

In order to manipulate a Selection, the content is loaded into a temporary ServerTextControl, manipulated and loaded back into the Web.TextControl. The following code shows how to format an existing range of text:

using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
{
    byte[] data = null;
    TextControl1.Selection.Save(out data, BinaryStreamType.InternalUnicodeFormat);

    tx.Create();
    tx.Load(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);

    tx.SelectAll();
    tx.Selection.Bold = true;

    tx.Save(out data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
    TextControl1.Selection.Load(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);
}
Using tx As New TXTextControl.ServerTextControl()
    Dim data As Byte() = Nothing
    TextControl1.Selection.Save(data, BinaryStreamType.InternalUnicodeFormat)

    tx.Create()
    tx.Load(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat)

    tx.SelectAll()
    tx.Selection.Bold = True

    tx.Save(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat)
    TextControl1.Selection.Load(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat)
End Using

In order to select a range of text in the Web.TextControl, a new Selection object is created and passed to the Selection property.

TextControl1.Selection = new Selection(1, 5);
TextControl1.Selection = New Selection(1, 5)

Client-side, Javascript Events

In order manipulate merge fields and to provide your own interface to insert and interact with merge fields, client-side Javascript events are available:

Event Description
textFieldEntered Is fired when the input position enters a text field.
textFieldLeft Is fired when the input position leaves a text field.

These events can be easily attached using Javascript in your ASPX page:

TX.addEventListener('textFieldEntered', function (e) {
    fieldEntered(e.fieldName, e.fieldType);
});

function fieldEntered(fieldName, fieldType) {
    alert(fieldName);
}

TX.addEventListener('textFieldLeft', function (e) {
    fieldLeft();
});

function fieldLeft() {
    alert('Field left');
}

Getting Started with ASP.NET Web Forms

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.

The source code for this simple example is located in the following directories:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Documentation Tutorials\HTML5 Web Editor\
VB.NET %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Documentation Tutorials\HTML5 Web Editor\

Used TX Text Control classes:

Create Your Application

1. Open Visual Studio and create a new ASP.NET Empty Web Application.

Image

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.

Image

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.

Image

4. Select TextControl1 on the form and browse for the Dock property in the Properties window and set this to Window.

Image

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 28.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 26.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:

protected void Page_Load(object sender, EventArgs e)
{
    TextControl1.SetFileDirectoryAsync(Server.MapPath("documents"),
        TXTextControl.Web.FileType.Document);
}
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)
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.

Image

Example - Full Screen Editor

The HTML5 Web Editor has three docking modes: None, Fill and Window. If set to None, the control size itself is used to render the editor. Fill fills the wrapping container and Window fills the complete browser Window. This sample is basically the tutorial that is launched on a button click in the Sample Explorer.

This example is part of the Sample Explorer project which includes all samples in one. The sources for this sample project can be found here:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Sample Explorer\
VB.NET %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Sample Explorer\

You will find the source code and the ASPX page of this sample in the Solution structure tree under: HTML5\fullwindow.aspx

Image

Example Description

The demo has a simple button Launch editor that opens another Web Form with a Web.TextControl on it.

<a target="_blank" href="/HTML5/html5_fullwindowform.aspx"><p class="button_back">Launch editor</p></a>

Click the button Launch editor to open the second Web Form.

Image

The opened Web Form simply contains an instance of the Web.TextControl with the property Dock set to Window to fill the complete Web Form:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html5_fullwindowform.aspx.cs"
    Inherits="tx_aspnet_samples.HTML5.html5_fullwindowform" %>

<%@ Register Assembly="TXTextControl.Web,
    Version=26.0.600.500, Culture=neutral,
    PublicKeyToken=6b83fe9a75cfb638" Namespace="TXTextControl.Web" TagPrefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <cc1:TextControl ID="TextControl1" runat="server" Dock="Window"/>

    </div>
    </form>
</body>
</html>

Example - Embedded Editor

The HTML5 Web editor can be embedded in all types of containers such as a DIV element. When the Dock property is set to Fill, the editor fills the wrapping container element automatically.

This example is part of the Sample Explorer project which includes all samples in one. The sources for this sample project can be found here:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Sample Explorer\
VB.NET %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Sample Explorer\

You will find the source code and the ASPX page of this sample in the Solution structure tree under: HTML5\embedded.aspx

Image

Example Description

This demo shows the default setup of the HTML5 Web editor ASP.NET control for Web Forms. All ribbons, context menus and dialog boxes are coming out-of-the-box and are ready to use.

Image

The Web.TextControl is embedded in a DIV element with a defined size in the style parameter. The Dock property of Web.TextControl is set to Fill to fill the complete container DIV.

<div style="height: 600px;" class="sample">
    <cc1:TextControl style="border-bottom: 1px solid #999999;" ID="TextControl1" runat="server" Dock="Fill"/>
</div>

Example - Loading and Saving

Documents can be loaded from files on the server, from memory variables or memory streams in various formats including DOC, DOCX, RTF, HTML and the internal TX Text Control format.

This example is part of the Sample Explorer project which includes all samples in one. The sources for this sample project can be found here:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Sample Explorer\
VB.NET %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Sample Explorer\

You will find the source code and the ASPX page of this sample in the Solution structure tree under: HTML5\loadingsaving.aspx

Image

Example Description

This demo shows how to load files from the server and how to upload and load files from the client.

Image

Loading Files Asynchronously

When the sample Web Form is opened, a document is loaded automatically asynchronously on the Form_Load event:

protected void Page_Load(object sender, EventArgs e)
{
    TextControl1.LoadTextAsync(Server.MapPath("/documents/template.docx"),
        TXTextControl.Web.StreamType.WordprocessingML);
}
Protected Sub Page_Load(sender As Object, e As EventArgs)
    TextControl1.LoadTextAsync(Server.MapPath("/documents/template.docx"), TXTextControl.Web.StreamType.WordprocessingML)
End Sub

Loading Server-Side Files

On clicking the button Load document from file, a document is loaded using the LoadText method:

protected void btnLoadFromServer_Click(object sender, EventArgs e)
{
    // load a physical document from the server
    TextControl1.LoadText(Server.MapPath("/documents/sample.docx"),
        TXTextControl.Web.StreamType.WordprocessingML);
}
Protected Sub btnLoadFromServer_Click(sender As Object, e As EventArgs)
    ' load a physical document from the server
    TextControl1.LoadText(Server.MapPath("/documents/sample.docx"), TXTextControl.Web.StreamType.WordprocessingML)
End Sub

Loading Files from Memory

The button Load document from memory loads a document into the non-UI ServerTextControl that saves the document into a byte array in the internal unicode format. This byte array is then loaded into the Web.TextControl:

protected void btnLoadFromServerMemory_Click(object sender, EventArgs e)
{
    // open a document using a temporary instance of ServerTextControl
    // and save it into a byte array
    // load the document from the byte array into the Web editor
    using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
    {
        tx.Create();
        TXTextControl.LoadSettings ls = new TXTextControl.LoadSettings();
        ls.ApplicationFieldFormat = TXTextControl.ApplicationFieldFormat.MSWord;

        tx.Load(Server.MapPath("/documents/template.docx"),
            TXTextControl.StreamType.WordprocessingML, ls);

        byte[] data;

        tx.Save(out data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
        TextControl1.LoadText(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);
    }
}
Protected Sub btnLoadFromServerMemory_Click(sender As Object, e As EventArgs)
    ' open a document using a temporary instance of ServerTextControl
    ' and save it into a byte array
    ' load the document from the byte array into the Web editor
    Using tx As New TXTextControl.ServerTextControl()
        tx.Create()
        Dim ls As New TXTextControl.LoadSettings()
        ls.ApplicationFieldFormat = TXTextControl.ApplicationFieldFormat.MSWord

        tx.Load(Server.MapPath("/documents/template.docx"), TXTextControl.StreamType.WordprocessingML, ls)

        Dim data As Byte()

        tx.Save(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat)
        TextControl1.LoadText(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat)
    End Using
End Sub

Loading Client-Side Files

The file upload control uploads a document in the binary formats DOC and DOCX. The content is stored in a byte array and loaded using the LoadText method:

protected void AjaxFileUpload1_UploadComplete(object sender,
    AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
    // load the uploaded document from a byte array
    byte[] data = e.GetContents();

    TXTextControl.Web.BinaryStreamType streamType =
        TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat;

    if (e.FileName.EndsWith("doc") == true)
        streamType = TXTextControl.Web.BinaryStreamType.MSWord;
    else if (e.FileName.EndsWith("docx") == true)
        streamType = TXTextControl.Web.BinaryStreamType.WordprocessingML;
    else
        return;

    try
    {
        TextControl1.LoadText(data, streamType);
    }
    catch { }
}
Protected Sub AjaxFileUpload1_UploadComplete(sender As Object, e As AjaxControlToolkit.AjaxFileUploadEventArgs)
    ' load the uploaded document from a byte array
    Dim data As Byte() = e.GetContents()

    Dim streamType As TXTextControl.Web.BinaryStreamType = TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat

    If e.FileName.EndsWith("doc") = True Then
        streamType = TXTextControl.Web.BinaryStreamType.MSWord
    ElseIf e.FileName.EndsWith("docx") = True Then
        streamType = TXTextControl.Web.BinaryStreamType.WordprocessingML
    Else
        Return
    End If

    Try
        TextControl1.LoadText(data, streamType)
    Catch
    End Try
End Sub

Saving Server-Side Files

When clicking the button Save document as a file on the server, the SaveText method is used to save a physical file server-side:

protected void btnSaveToServer_Click(object sender, EventArgs e)
{
    // save the document to a physical file on the server
    string sFilename = "results_" + Guid.NewGuid().ToString() + ".docx";
    TextControl1.SaveText(Server.MapPath("/output/" + sFilename),
        TXTextControl.Web.StreamType.WordprocessingML);
    lblStatusSave.Text = "Document has been saved:<br/>" + sFilename;
}
Protected Sub btnSaveToServer_Click(sender As Object, e As EventArgs)
    ' save the document to a physical file on the server
    Dim sFilename As String = "results_" + Guid.NewGuid().ToString() + ".docx"
    TextControl1.SaveText(Server.MapPath(Convert.ToString("/output/") & sFilename), TXTextControl.Web.StreamType.WordprocessingML)
    lblStatusSave.Text = Convert.ToString("Document has been saved:<br/>") & sFilename
End Sub

Saving Files to Memory

When the last button Save document to the memory on the server is clicked, the SaveText method is used to save the current document into a byte array in the internal unicode format. This byte array is loaded into an instance of the ServerTextControl:

protected void btnSaveToServerMemory_Click(object sender, EventArgs e)
{
    // save the document into a byte array
    byte[] data;
    TextControl1.SaveText(out data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);

    // load the byte array into a temporary ServerTextControl
    // sample use case: store document in a database
    using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
    {
        tx.Create();
        tx.Load(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
    }

    lblStatusSave0.Text = "Document has been temporary saved at " +
        String.Format("{0:T}", DateTime.Now);
}
Protected Sub btnSaveToServerMemory_Click(sender As Object, e As EventArgs)
    ' save the document into a byte array
    Dim data As Byte()
    TextControl1.SaveText(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat)

    ' load the byte array into a temporary ServerTextControl
    ' sample use case: store document in a database
    Using tx As New TXTextControl.ServerTextControl()
        tx.Create()
        tx.Load(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat)
    End Using

    lblStatusSave0.Text = "Document has been temporary saved at " + [String].Format("{0:T}", DateTime.Now)
End Sub

Example - Merging Templates

The most typical application for the HTML5 Web editor is creating templates for the Text Control Reporting engine MailMerge. Using TX Text Control .NET Server for ASP.NET, you can easily deploy a cross-browser, cross-platform template editor with an MS Word look and feel.

This example is part of the Sample Explorer project which includes all samples in one. The sources for this sample project can be found here:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Sample Explorer\
VB.NET %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Sample Explorer\

You will find the source code and the ASPX page of this sample in the Solution structure tree under: HTML5\template.aspx

Image

Example Description

Simply click the button Load template, add some text or fields and start the merge process by clicking the Merge template server-side button.

Image

On server-side, the sample database XML file is loaded into a new DataSet instance. This DataSet is used as the data source for the MailMerge component. The template is saved into a byte array using the SaveText method and loaded into the MailMerge instance using the LoadTemplateFromMemory method. Finally, the Merge method is called with the created DataSet. The resulting document is saved to memory and from there loaded back into the editor using LoadText.

protected void Button1_Click(object sender, EventArgs e)
{
    // load the data source (sample database)
    DataSet ds = new DataSet();
    ds.ReadXml(Server.MapPath("/datasource/sample_db.xml"), XmlReadMode.Auto);

    // save the template
    byte[] data;
    TextControl1.SaveText(out data,
        TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);

    // load the template into the MailMerge reporting engine
    mailMerge1.LoadTemplateFromMemory(data,
        TXTextControl.DocumentServer.FileFormat.InternalUnicodeFormat);

    // merge the template
    mailMerge1.Merge(ds.Tables["Sales_SalesOrderHeader"]);

    // save the resulting document to a byte array
    mailMerge1.SaveDocumentToMemory(out data,
        TXTextControl.BinaryStreamType.InternalUnicodeFormat, null);

    // load the document back into the Web editor
    TextControl1.LoadText(data,
        TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);
}
Protected Sub Button1_Click(sender As Object, e As EventArgs)
    ' load the data source (sample database)
    Dim ds As New DataSet()
    ds.ReadXml(Server.MapPath("/datasource/sample_db.xml"), XmlReadMode.Auto)

    ' save the template
    Dim data As Byte()
    TextControl1.SaveText(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat)

    ' load the template into the MailMerge reporting engine
    mailMerge1.LoadTemplateFromMemory(data, TXTextControl.DocumentServer.FileFormat.InternalUnicodeFormat)

    ' merge the template
    mailMerge1.Merge(ds.Tables("Sales_SalesOrderHeader"))

    ' save the resulting document to a byte array
    mailMerge1.SaveDocumentToMemory(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat, Nothing)

    ' load the document back into the Web editor
    TextControl1.LoadText(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat)
End Sub

Example - Customize RibbonBar

The TX Text Control RibbonBar consists of pure HTML and CSS and can be completely customized by changing the CSS.

This example is part of the Sample Explorer project which includes all samples in one. The sources for this sample project can be found here:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Sample Explorer\
VB.NET %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Sample Explorer\

You will find the source code and the ASPX page of this sample in the Solution structure tree under: HTML5\ribbon.aspx

Image

Example Description

The TX Text Control RibbonBar consists of pure HTML and CSS and can be completely customized by changing the CSS. The following screenshot shows the modified style of the RibbonBar. The background color, borders, active button colors and hover colors have been modified.

Image

This demo comes with a complete CSS file that contains all ribbon tabs, groups and buttons for customization. The RibbonBar in this demo has changed colors, font sizes and only one active ribbon tab (Home). Additionally, the last ribbon group of the ribbon tab is disabled (Editing).

All you need to do to customize the ribbon bar is to include the tx.css into your HTML HEAD tag. In the CSS file, you will find all classes of ribbon tabs, groups, icons and other elements. Each class has a commented line that can be uncommented to hide this element in the ribbon bar.

/* Make ribbon titles normal (default: uppercase) */
#txTemplateDesignerContainer ul.tabs li {
    text-transform: none !important;
}

/* Set background color of ribbon */
#txRibbonContentArea {
    background: -webkit-linear-gradient(#FFF, #a5a5a5); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FFF, #a5a5a5); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFF, #a5a5a5); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFF, #a5a5a5); /* Standard syntax */
    color: white;
}

Example - Customize Toolbars

Web.TextControl provides client-side methods to show and hide the various toolbars including the vertical and horizontal ruler bars, the status bar and the ribbon bar.

This example is part of the Sample Explorer project which includes all samples in one. The sources for this sample project can be found here:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Sample Explorer\
VB.NET %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Sample Explorer\

You will find the source code and the ASPX page of this sample in the Solution structure tree under: HTML5\toolbars.aspx

Image

Example Description

To provide client-side, Javascript applications, those methods are available as Javascript methods and can be adjusted without any server requests. Additionally, the ribbon bar can be collapsed and expanded programmatically.

Image

In order show or hide the different toolbars, Web.TextControl provides methods that can be called at run-time using client-side Javascript. In order to hide all toobars on creating the control, the event ribbonTabsLoaded can be used.

The demo consists of a Web.TextControl and 4 check boxes that can be used to show and hide the toolbars. On creating the Web.TextControl, all toolbars are hidden by default.

// client-side Javascript events

TX.addEventListener('ribbonTabsLoaded', function (e) {
    TX.showRibbonBar(false);
    TX.showStatusBar(false);
    TX.showVerticalRuler(false);
    TX.showHorizontalRuler(false);

    document.getElementById('verticalRuler').checked = false;
    document.getElementById('horizontalRuler').checked = false;
    document.getElementById('statusBar').checked = false;
    document.getElementById('ribbonBar').checked = false;
});

function toggleVerticalRuler() {
    TX.showVerticalRuler(document.getElementById('verticalRuler').checked);
}

function toggleHorizontalRuler() {
    TX.showHorizontalRuler(document.getElementById('horizontalRuler').checked);
}

function toggleStatusBar() {
    TX.showStatusBar(document.getElementById('statusBar').checked);
}

function toggleRibbonBar() {
    TX.showRibbonBar(document.getElementById('ribbonBar').checked);
}

Example - Programming API

Web.TextControl provides the same interface to the TextParts such as the ServerTextControl. You can iterate through all TextParts including the MainText, TextFrames and HeaderFooter objects. These TextPart objects provide a Selection object that can be used to get and set formatted text and to interact with the content.

This example is part of the Sample Explorer project which includes all samples in one. The sources for this sample project can be found here:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Sample Explorer\
VB.NET %USERPROFILE%\Documents\TX Text Control 28.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Sample Explorer\

You will find the source code and the ASPX page of this sample in the Solution structure tree under: HTML5\selection.aspx

Image

Example Description

A temporary ServerTextControl is used to modify the content of Web.TextControl. The Selection is loaded into a ServerTextControl, modified and loaded back to Web.TextControl.

The following screenshot shows a custom TreeView control to insert merge fields and reusable text blocks programmatically.

Image

The following code snipped shows how to insert a new merge field. A temporary ServerTextControl is created and a new merge field is inserted using the ApplicationFieldCollection. The content is temporary saved to a byte array and loaded into the current selection of the Web.TextControl. Using this approach, any element, text block or other word processing elements can be added to the Web.TextControl.

protected void Button1_Click(object sender, EventArgs e)
{
    // insert a new text field into Web.TextControl
    using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
    {
        tx.Create();

        MergeField newField = new MergeField();
        newField.Name = TextBox2.Text;
        newField.Text = "Text Field: " + TextBox2.Text; ;

        tx.ApplicationFields.Add(newField.ApplicationField);

        byte[] data;
        tx.Save(out data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
        TextControl1.Selection.Load(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);

        TextBox2.Text = "";
    }
}
Protected Sub Button1_Click(sender As Object, e As EventArgs)
' insert a new text field into Web.TextControl
    Using tx As New TXTextControl.ServerTextControl()
        tx.Create()

        Dim newField As New MergeField()
        newField.Name = TextBox2.Text
        newField.Text = "Text Field: " + TextBox2.Text



        tx.ApplicationFields.Add(newField.ApplicationField)

        Dim data As Byte()
        tx.Save(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat)
        TextControl1.Selection.Load(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat)

        TextBox2.Text = ""
    End Using
End Sub

Additionally, several events are available to interact with merge fields. This allows the insertion and manipulation of merge fields using your own interface.

// client-side Javascript events for merge fields

TX.addEventListener('textFieldEntered', function (e) {
    fieldEntered(e.fieldName, e.fieldType);
});

TX.addEventListener('textFieldLeft', function (e) {
    fieldLeft();
});

function fieldEntered(fieldName, fieldType) {
    document.getElementById('TextBox1').value = fieldName;
}

function fieldLeft() {
    document.getElementById('TextBox1').value = '';
}