ASPxRichEdit Class

A rich text editor.

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

Related API Members

The following members accept/return ASPxRichEdit objects:

Remarks

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

ASPxRichEdit-class

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.

RIchEdit-Toolbox.png

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

NOTE

To properly function, DevExpress controls require that special modules, handlers and options are registered in the the Web.config file. Switch the Microsoft Visual Studio IDE to the Design tab to automatically update the Web.config file with the required DevExpress information.

<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);
}

Client-Side API

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

Availability

Available if the EnableClientSideAPI property is set to true, the ClientInstanceName property is defined or any client event is handled.

Client object type

ASPxClientRichEdit

Access name

ASPxRichEdit.ClientInstanceName

Events

ASPxRichEdit.ClientSideEvents

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.

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.
richEdit.Settings.Views.ViewType = RichEditViewType.Simple;
richEdit.commands.changeViewType.execute(ASPx.ViewType.Simple);

More details | See demo

Online Demos

Rich Text Editor - Introduction

See Also