Client API

• Jun 17, 2021
• 2 minutes to read

The Rich Text Editor’s API allows you to process an open document on the client.

Run Demo: Client Command API Run Demo: Client-Side Events

The most commonly used properties are listed below:

• commands - allows you to create, open, modify, and save a document;

• document - returns information about document content;

• selection - allows you to change the cursor position in a document and select document elements.

Refer to the following section for examples on how to use the client-side API: Common Use Cases.

Access the Rich Text Editor on the Client

The ClientInstanceName property specifies a unique client-side identifier for the ASPxRichEdit control. Use this identifier to access the ASPxClientRichEdit object on the client.

ASPX

<dx:ASPxRichEdit ID="richEdit" runat="server" ClientInstanceName="richEdit"/>

Client-Side Methods

The ASPxClientRichEdit class methods allow you to perform actions (for instance, export the current document to PDF) and specify the control settings (dimensions, visibility, and view mode) on the client.

JS

richEdit.SetFullscreenMode(false);
richEdit.SetHeight(500);
richEdit.SetWidth(900);

Client-Side Events

Client-side events are triggered in response to specific actions or events on the client. Set the RaiseClientEventsOnModificationsViaAPI property to false to trigger client-side events only in response to user actions.

ASPX

<dx:ASPxRichEdit ID="richEdit" runat="server" ClientInstanceName="richEdit">
    <Settings>
        <Behavior RaiseClientEventsOnModificationsViaAPI="false" />
    </Settings>
</dx:ASPxRichEdit>

How to Assign an Event Handler

You can define the client-side event handlers in the following ways:

On the server

Use the RichEditClientSideEvents class properties to specify the name of the JavaScript function or the entire JavaScript code that handles a client event.

ASPX

<script type="text/javascript">
function OnActiveSubDocumentChanged(s, e) {
    var subDocumentType = s.document.activeSubDocument.type;
    if (subDocumentType == ASPx.SubDocumentType.Header || subDocumentType == ASPx.SubDocumentType.Footer)  
        s.selection.setMainSubDocumentAsActive();
}
</script>

<dx:ASPxRichEdit ID="richEdit" runat="server" ClientInstanceName="richEdit">
    <ClientSideEvents 
        ActiveSubDocumentChanged="OnActiveSubDocumentChanged"
        DocumentLoaded="function(s, e) {s.commands.updateAllFields.execute();}"/>
</dx:ASPxRichEdit>

On the client

Use the AddHandler(handler), RemoveHandler(handler) and ClearHandlers methods to assign an event handler to an event (or remove it from an event) at runtime.

JS

richEdit.ActiveSubDocumentChanged.AddHandler(function(s, e) {
    var subDocumentType = s.document.activeSubDocument.type;
    if (subDocumentType == ASPx.SubDocumentType.Header || subDocumentType == ASPx.SubDocumentType.Footer)  
        s.selection.setMainSubDocumentAsActive();
});

Refer to the following section for more information on how to assign event handlers: Client-Side Events.