Back to Devexpress

ASPxRichEdit Class

aspnet-devexpress-dot-web-dot-aspxrichedit.md

latest15.1 KB
Original Source

ASPxRichEdit Class

A rich text editor.

Namespace : DevExpress.Web.ASPxRichEdit

Assembly : DevExpress.Web.ASPxRichEdit.v25.2.dll

NuGet Package : DevExpress.Web.Office

Declaration

csharp
public class ASPxRichEdit :
    ASPxDataWebControl,
    OfficeWorkSessionControl,
    IParentSkinOwner,
    ISkinOwner,
    IPropertiesOwner,
    IControlDesigner,
    IAutoSaveControl,
    IDialogUtilsOwner,
    IStyleSheetManagerImagesProvider
vb
Public Class ASPxRichEdit
    Inherits ASPxDataWebControl
    Implements OfficeWorkSessionControl,
               IParentSkinOwner,
               ISkinOwner,
               IPropertiesOwner,
               IControlDesigner,
               IAutoSaveControl,
               IDialogUtilsOwner,
               IStyleSheetManagerImagesProvider

The following members return ASPxRichEdit objects:

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.25.2: 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.

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

Run Time

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

Note

DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.

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
  • 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.

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

More details | See demo

Online Demos

Rich Text Editor - Introduction

Implements

Show 15 items

IComponent

IDisposable

IParserAccessor

IDataBindingsAccessor

IControlBuilderAccessor

IControlDesignerAccessor

IExpressionsAccessor

IAttributeAccessor

IUrlResolutionService

INamingContainer

IPostBackDataHandler

IPostBackEventHandler

ICallbackEventHandler

IDataSourceViewSchemaAccessor

IPropertiesOwner

Inheritance

Object Control WebControl ASPxWebControlBase ASPxWebControl ASPxDataWebControlBase ASPxDataWebControl ASPxRichEdit BootstrapRichEdit

MVCxRichEdit

See Also

ASPxRichEdit Members

Rich Text Editor

ASPxClientRichEdit

DevExpress.Web.ASPxRichEdit Namespace