Client API

• Sep 09, 2024
• 2 minutes to read

The RichEdit topic is your entry point for information on RichEdit client-side API. Navigate to this document to review the full list of all available properties and methods. The two most commonly used properties are the following:

• document - provides access to document structural elements (such as sections, main sub-document, styles for characters, paragraphs, and tables).
• selection - provides access to the selected content, allows you to position the cursor within a document, and to select document content elements.

The following animation shows you how to effectively navigate the client-side documentation.

• The navigation bar on the left lists settings available at the current level (excluding the inherited members that are available in a class description).
• Once you select an option, follow the link to its type in the Property Value section to learn about nested settings.

Access The Editor on The Client Side

To access the editor on the client side, use the Name value specified on the server side.

Razor C#

@(Html.DevExpress().RichEdit("richEdit") //...

JS

richEdit.adjust();

Client-Side Events

You can define the RichEdit control’s client-side event handlers in the following ways.

.NET Core Server Settings

The RichEditBuilder object exposes methods that allow you to assign an event handler to a corresponding client-side event. These methods start with “On”: OnContentInserted(String), OnGotFocus(String), etc.

You can define an event handler in the control’s builder; or specify the event handler name in the builder, and define the event handler function on the page or in an external script file.

JS

function onDocumentLoaded(s, e) { /* ... */ }

Razor C#

@(Html.DevExpress().RichEdit("richEdit")
   .OnGotFocus("function(s,e){ /* ... */ }")
   .OnDocumentLoaded("onDocumentLoaded")
   //...

Client Settings

The Options.events property provides access to a list of available client events and allows you to define event handlers.

JS

const options = DevExpress.RichEdit.createOptions();
options.events.gotFocus = function(s,e){ /* ... */ };
//...
var richElement = document.getElementById("rich-container");
const richEdit = DevExpress.RichEdit.create(richElement, options);

Runtime Settings

The RichEdit.events property provides access to a list of available client events.

Use the addHandler(handler), removeHandler(handler), and clearHandlers methods to dynamically add and remove event handlers.

JS

richEdit.events.documentLoaded.addHandler(function(s, e) { /* ... */ });