How to: Common Use Cases

• Mar 10, 2020
• 2 minutes to read

This topic contains code samples that show how to use the Rich Text Editor.

Tip

See how to implement these cases in ASP.NET Web Forms ASPxRichEdit control.

Insert a text at the cursor position

Related members: activeSubDocument, insertText(position, text), active

JS

richEdit.selection.activeSubDocument.insertText(richEdit.selection.active,'sometext');

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

Related members: activeSubDocument, insertText(position, text), length

JS

richEdit.selection.activeSubDocument.insertText(richEdit.selection.activeSubDocument.length - 1, 'sometext');

Delete all text in the active sub-document

Related members: activeSubDocument, deleteText(interval), interval

JS

richEdit.selection.activeSubDocument.deleteText(richEdit.selection.activeSubDocument.interval);

//In versions before 19.2.6
richEdit.selection.activeSubDocument.deleteText(new DevExpress.RichEdit.Interval(0, richEdit.selection.activeSubDocument.length));

Insert a picture at a certain position

Related members: activeSubDocument, insertPicture(position, base64)

JS

richEdit.selection.activeSubDocument.insertPicture(position, image);

Get the main sub-document’s content length

Related members: RichEditDocumentBase.length, main, SubDocument.length

JS

var mainSubDocumentLength = richEdit.document.length;
//or 
var mainSubDocumentLength = richEdit.document.subDocuments.main.length;

Get the whole text of the main sub-document

Related members: getText

JS

var mainSubDocumentText = richEdit.document.getText();

Get the selected text

Related members: activeSubDocument, getText

JS

var selectedText = richEdit.selection.activeSubDocument.getText(richEdit.selection.intervals[0]);

Get all fields in the main sub-document

Related members: fields

JS

var mainSubDocumentFields = richEdit.document.fields;

Create a field at the cursor position

Related members: fields, create(position)

JS

richEdit.selection.activeSubDocument.fields.create(richEdit.selection.active,'time');

Update all fields

Related members: fields, updateAllFields

JS

richEdit.document.fields.updateAllFields();

Create a header and populate it with a text

Related members: sections, getHeader(type)

JS

var sd = richEdit.document.sections.getByIndex(0).getHeader(DevExpress.RichEdit.HeaderFooterType.Primary, true);
sd.insertText(0, 'sometext')

Create a table at the certain position

Related members: tables, create(position, columnCount, rowCount)

JS

richEdit.document.tables.create(tblPosition,2,3);

Scroll to a bookmark

Related members: bookmarks, find(position), goTo

JS

richEdit.document.bookmarks.find("bookmarkName")[0].goTo();

Get a bookmark interval by its name

Related members: bookmarks, find(position), interval

JS

//Starting with v19.2.7
var bookmarkInterval = richEdit.document.bookmarks.find('bookmark')[0].interval;

Get URLs of all hyperlinks in the main sub-document

Related members: hyperlinks, hyperlinkInfo

JS

var hyperlinks = richEdit.document.hyperlinks;
var hyperlinkUrls = [];
for(var i = 0, hyperlink; hyperlink = hyperlinks.getByIndex(i); i++)
    if(hyperlink.hyperlinkInfo.url)
        hyperlinkUrls.push(hyperlink.hyperlinkInfo.url);

//In versions before 19.2.7      
var hyperlinks = richEdit.document.hyperlinks;
var count = hyperlinks.count;
var hyperlinkUrls = [];
for(var i = 0; i < count; i++) {
    var hyperlink = hyperlinks.getByIndex(i);
    if(hyperlink.hyperlinkInfo.url)
        hyperlinkUrls.push(hyperlink.hyperlinkInfo.url);
}

Remove a field

Related members: fields, delete

JS

richEdit.document.fields.getByIndex(0).delete();

Update all fields once the editor is shown

Related members: OnDocumentLoaded(String), fields, updateAllFields

Razor C#

@(Html.DevExpress().RichEdit("richEdit")
    .OnDocumentLoaded("function(s, e) { s.document.fields.updateAllFields(); }")
...