All docs
V20.2
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

How to: Common Use Cases

  • 3 minutes to read

This topic contains code samples that show how to use the ASPxRichEdit control.

TIP

For details on how to implement these cases in the ASP.NET Core Rich Text Editor control, see the following help topic: How to: Common Use Cases.

Insert text at the cursor position

Related members: InsertTextCommand.execute(text)

richEdit.commands.insertText.execute('sometext');

Insert text at the end of the active sub-document

Related members: goToDocumentEnd, InsertTextCommand.execute(text)

richEdit.selection.goToDocumentEnd();
richEdit.commands.insertText.execute("sometext");

Delete all text in the active sub-document

Related members: selectAll, DeleteCommand.execute

richEdit.selection.selectAll();
richEdit.commands.delete.execute();

Insert a picture at a specified position

Related members: intervals, InsertPictureCommand.execute(imageUrl)

var imageUrl = "https://demos.devexpress.com/ASPxImageAndDataNavigationDemos/Content/Images/landscapes/07.jpg";
richEdit.selection.intervals = [{ start: position, length: 0 }];
richEdit.commands.insertPicture.execute(imageUrl);

Get the main sub-document's content length

Related members: mainSubDocument, length

var mainSubDocumentLength = richEdit.document.mainSubDocument.length;

Get the entire text of the main sub-document

Related members: mainSubDocument, text

var mainSubDocumentText = richEdit.document.mainSubDocument.text;

Get the selected text

Related members: intervals, activeSubDocument, text, start, length

var firstSelectedInterval = richEdit.selection.intervals[0];
var selectedText = richEdit.document.activeSubDocument.text.substr(firstSelectedInterval.start, firstSelectedInterval.length);

Get all fields in the main sub-document

Related members: mainSubDocument, fieldsInfo

var mainSubDocumentFields = richEdit.document.mainSubDocument.fieldsInfo;

Create a field at the cursor position

Related members: CreateFieldCommand.execute

richEdit.commands.createField.execute('time');

Update all fields

Related members: UpdateAllFieldsCommand.execute

richEdit.commands.updateAllFields.execute();

Create a header and populate it with text

Related members: InsertHeaderCommand.execute, InsertTextCommand.execute(text), CloseHeaderFooterCommand.execute

richEdit.commands.insertHeader.execute();
richEdit.commands.insertText.execute("sometext");
richEdit.commands.closeHeaderFooter.execute();

Create a table at the specified position

Related members: intervals, InsertTableCommand.execute(columnCount,rowCount)

richEdit.selection.intervals = [{ start: tblPosition, length: 0 }];
richEdit.commands.insertTable.execute(2, 3);

Scroll to a bookmark

Related members: GoToBookmarkCommand.execute(name)

richEdit.commands.goToBookmark.execute("bookmarkName");

Get a bookmark interval by its name

Related members: mainSubDocument, findBookmarks(arg)

var bookmarkInterval = richEdit.document.mainSubDocument.findBookmarks('bookmark')[0].interval;

Scroll to the document end

Related members: setByDocumentPosition(position), mainSubDocument, length

richEdit.scroll.setByDocumentPosition(richEdit.document.mainSubDocument.length);

Related members: mainSubDocument, fieldsInfo, Field

var fields = richEdit.document.mainSubDocument.fieldsInfo;
var hyperlinkUrls = [];
for(var i = 0; i < fields.length; i++) {
    var field = fields[i];
    if(field.isHyperlink && field.hyperlinkUri)
        hyperlinkUrls.push(field.hyperlinkUri);
}

Remove a field

Related members: intervals, setSelection(arg), mainSubDocument, fieldsInfo, DeleteCommand.execute

var selection = richEdit.selection.intervals;
richEdit.selection.setSelection(richEdit.document.mainSubDocument.fieldsInfo[0].interval);
richEdit.commands.delete.execute();
richEdit.selection.intervals = selection;

Update all fields once the editor is shown

Related members: DocumentLoaded, UpdateAllFieldsCommand.execute

<dx:ASPxRichEdit ID="DemoRichEdit" runat="server" Width="100%" Height="700px">
    <ClientSideEvents DocumentLoaded="function(s, e) {s.commands.updateAllFields.execute();}" />
</dx:ASPxRichEdit>

Create a server-side document's model and pass it to the client model

Related members: InsertContentFromServerCommand.execute, InsertContentToClient

<dx:ASPxButton runat="server" ID="InsertModel" Text="Insert Model">
    <ClientSideEvents Click="function(s, e) {richEdit.commands.insertContentFromServer.execute('model');}" />
</dx:ASPxButton>
    <dx:ASPxRichEdit ID="DemoRichEdit" runat="server" ClientInstanceName="richEdit" 
        OnInsertContentToClient="ASPxRichEdit1_InsertContentToClient">
    </dx:ASPxRichEdit>
protected void ASPxRichEdit1_InsertContentToClient(object sender, DevExpress.Web.ASPxRichEdit.InsertContentToClientEventArgs e) {
    if (e.RequestId == "model") {
        var docServer = new RichEditDocumentServer();
        var document = docServer.Document;

        document.AppendText("Model To Insert");
        DocumentRange myRange = document.Paragraphs[0].Range;
        CharacterProperties charProps = document.BeginUpdateCharacters(myRange);
        charProps.FontSize = 30;
        charProps.Bold = true;
        document.EndUpdateCharacters(charProps);
        e.Result = document;
    }
}