ASPxRichEdit Class

Namespace: DevExpress.Web.ASPxRichEdit

Assembly: DevExpress.Web.ASPxRichEdit.v20.1.dll

Declaration

public class ASPxRichEdit :
    ASPxDataWebControl,
    OfficeWorkSessionControl,
    IParentSkinOwner,
    ISkinOwner,
    IPropertiesOwner,
    IControlDesigner,
    IAutoSaveControl,
    IDialogUtilsOwner,
    IStyleSheetManagerImagesProvider

Public Class ASPxRichEdit
    Inherits ASPxDataWebControl
    Implements OfficeWorkSessionControl,
               IParentSkinOwner,
               ISkinOwner,
               IPropertiesOwner,
               IControlDesigner,
               IAutoSaveControl,
               IDialogUtilsOwner,
               IStyleSheetManagerImagesProvider

Remarks

The ASPxRichEdit control's visual interface allows you to create, load, modify, print, save, and convert rich-formatted text files.

Create a Rich Text Editor

Design Time

The ASPxRichEdit control is available on the DX.20.1: Common Controls toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control's settings, or paste the control markup in the page's source code.

<dx:ASPxRichEdit ID="RichEdit" runat="server" WorkDirectory="~\App_Data\WorkDirectory">
</dx:ASPxRichEdit>

Run Time

using DevExpress.Web.ASPxRichEdit;
...
protected void Page_Load(object sender, EventArgs e) {
    ASPxRichEdit richEdit = new ASPxRichEdit();
    richEdit.ID = "RichEdit";
    richEdit.WorkDirectory = "~/App_Data/WorkDirectory";
    // Add the created control to the page
    Page.Form.Controls.Add(richEdit);
}

Imports DevExpress.Web.ASPxRichEdit
...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim richEdit As ASPxRichEdit = New ASPxRichEdit()
    richEdit.ID = "RichEdit"
    richEdit.WorkDirectory = "~/App_Data/WorkDirectory"
    Page.Form.Controls.Add(richEdit)
End Sub

Client-Side API

The ASPxRichEdit's client-side API is implemented with JavaScript and exposed by the ASPxClientRichEdit object.

Document Structure

The Rich Text Editor builds a document model while loading a document. The model defines a logical document structure. The editor's layout engine converts the document model into a document layout structure which represents the appearance of physical entities (such as text, picture, and table) in a document. Then, the control renders HTML code to create the document layout.

More details

Supported Document Formats

The ASPxRichEdit control supports the following file extensions:

• DOC, DOCX, RTF, TXT, ODT, XML, EPUB
• HTML, MHT - open/save with limitations
• PDF - programmatic export only

More details | See demo: Load/Save | See demo: Export to PDF

Document Management

The Rich Text Editor allows users to create, edit, and save rich-text documents in a browser. The editor provides ribbon command buttons that allow users to manage a document. You can customize the default UI and manage file operations in code.

More details | See demo: Load/Save | See demo: Custom Document Management

Document Editing

The Rich Text Editor ships with a comprehensive set of document editing tools. You can modify documents via the UI or in code. The main document features are listed below.

• Character Formatting (More details | See demo)
• Paragraph Formatting (More details | See demo)
• Text Styles (See demo)
• Sections (See demo)
• Bullets And Numbering (See demo)
• Hyperlinks and Bookmarks (See demo)
• Tables (See demo)
• Headers and Footers (See demo)
• Find and Replace (See demo)
• Floating Objects (See demo)
• Table of Contents (More details | See demo)
• Auto Correct (More details | See demo)
• Spell Checking (More details | See demo)

Document Protection

The ASPxRichEdit control allows users to open and view protected documents. You can identify users and enable text ranges permitted for the specified user or group.

More details | See demo

Developer API

• Server-Side API. You can modify a document on the server side with a non-visual cross-platform .NET library Office File API.
• Client-Side API. The Rich Text Editor provides a comprehensive client API that allows you to modify the open document programmatically on the client side.

More details: Office File API | More details: Client API | See demo

Fields

You can insert special placeholders fields which are replaced with actual data when the document is displayed or printed.

More details | See demo

Mail Merge

The Mail Merge retrieves data from a bound data source and fills in the fields in a document template. This feature can be used to compose, preview, and generate catalogues, reports, or personalized letters.

Use the DataSourceID or DataSource property to specify a bound data source. To initialize a mail merge, use the UI or call the MailMerge method.

More details | See demo

Ribbon

The ASPxRichEdit control allows you to customize its ribbon at design and run time, provides display styles (RibbonMode), supports external ribbon. You can also enable the one-line mode that is optimized for touch devices.

See demo

Context Menu

The ASPxRichEdit provides a context menu. Handle the PopupMenuShowing client-side event to add, modify, and remove menu items, or prevent the context menu from being displayed.

<script>
function RichEditPopupMenuShowing(s, e) {
    e.menuItems.Clear();
    var insertDateItem = new ASPxClientRichEditPopupMenuItem();
    insertDateItem.name = "addDate";
    insertDateItem.text = "Insert the Current Date";
    e.menuItems.Insert(0, insertDateItem);
    ...
}
function RichEditCustomCommandExecuted(s, e) {
    switch(e.commandName) {
        case "addDate":
            s.commands.createDateField.execute();
            break;
        ...
    }
}
</script>

<dx:ASPxRichEdit ID="DemoRichEdit" runat="server">
    <ClientSideEvents
        PopupMenuShowing="function(s, e) { RichEditPopupMenuShowing(s, e); }"
        CustomCommandExecuted="function(s, e) { RichEditCustomCommandExecuted(s, e); }">
    </ClientSideEvents>
</dx:ASPxRichEdit>

See demo

Simple View

In Simple View mode, the control ignores a page's layout and a document occupies all the available area inside the control. Users can enable/disable Simple View mode via ribbon commands.

To enable the mode programmatically, do one of the following:

• Set the server ViewType property to Simple.

• CS

richEdit.Settings.Views.ViewType = RichEditViewType.Simple;

• Execute the client ChangeViewTypeCommand command.

• JS

richEdit.commands.changeViewType.execute(ASPx.ViewType.Simple);

More details | See demo

Online Demos

Rich Text Editor - Introduction