How to: Common Use Cases

• Feb 06, 2020
• 2 minutes to read

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

Tip

See how to implement these cases in ASP.NET Core Rich Text Editor control.

Insert a text at the cursor position

Related members: InsertTextCommand.execute(text)

JS

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

Insert a text at the end of the active sub-document

Related members: goToDocumentEnd, InsertTextCommand.execute(text)

JS

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

Delete all text in the active sub-document

Related members: selectAll, DeleteCommand.execute

JS

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

Insert a picture at a certain position

Related members: intervals, InsertPictureCommand.execute(imageUrl)

JS

richEdit.selection.intervals = [{ start: position, length: 0 }];
richEdit.commands.insertPicture.execute(image);

Get the main sub-document’s content length

Related members: mainSubDocument, length

JS

var mainSubDocumentLength = richEdit.document.mainSubDocument.length;

Get the whole text of the main sub-document

Related members: mainSubDocument, text

JS

var mainSubDocumentText = richEdit.document.mainSubDocument.text;

Get the selected text

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

JS

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

JS

var mainSubDocumentFields = richEdit.document.mainSubDocument.fieldsInfo;

Create a field at the cursor position

Related members: CreateFieldCommand.execute

JS

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

Update all fields

Related members: UpdateAllFieldsCommand.execute

JS

richEdit.commands.updateAllFields.execute();

Create a header and populate it with a text

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

JS

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

Create a table at the certain position

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

JS

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

Scroll to a bookmark

Related members: GoToBookmarkCommand.execute(name)

JS

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

Get a bookmark interval by its name

Related members: mainSubDocument, findBookmarks(arg)

JS

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

Scroll to the document end

Related members: setByDocumentPosition(position), mainSubDocument, length

JS

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

Get URLs of all hyperlinks in the main sub-document

Related members: mainSubDocument, fieldsInfo, Field

JS

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

JS

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

ASPX

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