Skip to main content
All docs
V25.1
  • 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

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

    Insert text at the end of the active sub-document

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

    Delete all text in the active sub-document

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

    Insert a picture at a specified position

    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

    var mainSubDocumentLength = richEdit.document.mainSubDocument.length;
    

    Get the entire text of the main sub-document

    var mainSubDocumentText = richEdit.document.mainSubDocument.text;
    

    Get the selected text

    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

    var mainSubDocumentFields = richEdit.document.mainSubDocument.fieldsInfo;
    

    Create a field at the cursor position

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

    Update all fields

    richEdit.commands.updateAllFields.execute();
    

    Create a header and populate it with text

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

    Create a table at the specified position

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

    Scroll to a bookmark

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

    Get a bookmark interval by its name

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

    Scroll to the document end

    richEdit.scroll.setByDocumentPosition(richEdit.document.mainSubDocument.length);
    
    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

    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

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

    Change the font size of the inserted text

    <script type="text/javascript">
    function onContentInserted(s, e) {
        var previousSelection = s.selection.intervals;
        s.commands.beginUpdate();
        s.selection.intervals = [e.interval];
        s.commands.changeFontSize.execute(10);
        s.selection.intervals = previousSelection;
        s.commands.endUpdate();
    }
    </script>
    
    <dx:ASPxRichEdit ID="richEdit" runat="server" ClientInstanceName="richEdit">
        <ClientSideEvents ContentInserted="OnContentInserted"/>
    </dx:ASPxRichEdit>
    

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

    <dx:ASPxButton runat="server" ID="InsertModel" Text="Insert Model">
        <ClientSideEvents Click="function(s, e) {richEdit.commands.insertContentFromServer.execute('model');}" />
    </dx:ASPxButton>
    <dx:ASPxRichEdit ID="richEdit" 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;
        }
    }