How to: Common Use Cases

• Jun 29, 2020
• 7 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.

Document management

Open a document

Related members: openDocument, DocumentFormat

JS

var documentAsBase64 = "e1xydGYxXGRlZmYwe1xmb250dGJse1xmMCBDYWxpYnJpO319e1xjb2xvcnRibCA7XHJlZDB"
    + "cZ3JlZW4wXGJsdWUyNTUgO1xyZWQyNTVcZ3JlZW4yNTVcYmx1ZTI1NSA7fXtcKlxkZWZjaHAgXGZzMjJ9e1xzdHl"    
    + "sZXNoZWV0IHtccWxcZnMyMiBOb3JtYWw7fXtcKlxjczFcZnMyMiBEZWZhdWx0IFBhcmFncmFwaCBGb250O317XCp"
    + "cY3MyXGZzMjJcY2YxIEh5cGVybGluazt9e1wqXHRzM1x0c3Jvd2RcZnMyMlxxbFx0c3ZlcnRhbHRcdHNjZWxsY2J"
    + "wYXQyXHRzY2VsbHBjdDBcY2x0eGxydGIgTm9ybWFsIFRhYmxlO319e1wqXGxpc3RvdmVycmlkZXRhYmxlfXtcaW5"
    + "mb31cbm91aWNvbXBhdFxzcGx5dHduaW5lXGh0bWF1dHNwXGV4cHNocnRuXHNwbHRwZ3BhclxkZWZ0YWI3MjBcc2V"
    + "jdGRcbWFyZ2xzeG4xNDQwXG1hcmdyc3huMTQ0MFxtYXJndHN4bjE0NDBcbWFyZ2JzeG4xNDQwXGhlYWRlcnk3MjB"
    + "cZm9vdGVyeTcyMFxwZ3dzeG4xMjI0MFxwZ2hzeG4xNTg0MFxjb2xzMVxjb2xzeDcyMFxwYXJkXHBsYWluXHFse1x"
    + "mczIyXGNmMFxjczEgRG9jdW1lbnQgdGV4dH1cZnMyMlxjZjBccGFyfQ==";
richEdit.openDocument(documentAsBase64, "DocumentName", DevExpress.RichEdit.DocumentFormat.Rtf);

Export a document

Related members: exportToBase64(callback), DocumentFormat

JS

richEdit.exportToBase64(function (documentAsBase64) {
    console.log(documentAsBase64);
}, DevExpress.RichEdit.DocumentFormat.Rtf);

Save a document

Related members: saveDocument, DocumentFormat, events, SavingEventArgs,

Related topic: Save document

JS

richEdit.events.saving.addHandler(function(s, e) {
    console.log(e.base64);
    e.handled = true;
});
...
richEdit.saveDocument(DevExpress.RichEdit.DocumentFormat.OpenXml);

Download a document

Related members: downloadDocument, newDocument

JS

richEdit.newDocument();
//downloads the myDocument.rtf file
richEdit.downloadDocument(DevExpress.RichEdit.DocumentFormat.Rtf, 'myDocument');

Mail merge and load the resulting document

Related members: newDocument, openDocument, mailMerge(callback), DocumentFormat, insertText(position, text), createMergeField(position, name), setDataSource(dataSource)

JS

var format = DevExpress.RichEdit.DocumentFormat.OpenXml;
var newDataSource = [
    { firstName: "Alex", birthYear: 1991 },
    { firstName: "Joe", birthYear: 1990 },
    { firstName: "Bob", birthYear: 1995 }
];
richEdit.newDocument();
richEdit.document.insertText(richEdit.document.length, 'FirstName: ');
richEdit.document.fields.createMergeField(richEdit.document.length, "firstName");

richEdit.mailMergeOptions.setDataSource(newDataSource);
richEdit.mailMerge(function (mergedDocument) {
  var reader = new FileReader();
  reader.onloadend = function () {
    richEdit.openDocument(reader.result, "MergedDocument", format);
  };
  reader.readAsDataURL(mergedDocument);
}, DevExpress.RichEdit.MergeMode.NewParagraph, format);

Switch between a mail merge template and the result document

Related members: newDocument, openDocument, mailMerge(callback), exportToBase64(callback), DocumentFormat, insertText(position, text), insertParagraph(position), createMergeField(position, name), setDataSource(dataSource), show, events, CustomCommandExecutedEvent, CustomCommandExecutedEventArgs, updateRibbon(callback), getTab(id), activeTabIndex, RibbonTabType, RibbonButtonItem

JS

var commandId = "MailMergeSwitch";
var showMailMergeResult = false;
var templateDocument = null;
var format = DevExpress.RichEdit.DocumentFormat.OpenXml;

var newDataSource = [
    { firstName: "Alex", birthYear: 1991 },
    { firstName: "Joe", birthYear: 1990 },
    { firstName: "Bob", birthYear: 1995 }
];
var showTemplateDocument = function() {
    showMailMergeResult = !showMailMergeResult;
    richEdit.openDocument(templateDocument, "TemplateDocument", format);
};
var showResultDocument = function() {
    richEdit.loadingPanel.show();
    richEdit.exportToBase64(function(documentAsBase64) {
        templateDocument = documentAsBase64;
        richEdit.mailMerge(function (mergedDocument) {
          var reader = new FileReader();
          reader.onloadend = function () {
            showMailMergeResult = !showMailMergeResult;
            richEdit.openDocument(reader.result, "MergedDocument", format);
          };
          reader.readAsDataURL(mergedDocument);
        }, DevExpress.RichEdit.MergeMode.NewParagraph, format);
    });
};

richEdit.events.customCommandExecuted.addHandler(function(s, e) {
    if (e.commandName == commandId)
        if (showMailMergeResult)
            showTemplateDocument();
        else 
            showResultDocument();
});

richEdit.newDocument();
richEdit.document.insertText(richEdit.document.length, 'You can change template as you want.');
richEdit.document.insertParagraph(richEdit.document.length);
richEdit.document.insertText(richEdit.document.length, 'FirstName: ');
richEdit.document.fields.createMergeField(richEdit.document.length, "firstName").update();
richEdit.mailMergeOptions.setDataSource(newDataSource);

richEdit.documentName = "TemplateDocument";

richEdit.updateRibbon(function(ribbon) {
    if (!ribbon.getTab(DevExpress.RichEdit.RibbonTabType.MailMerge).getItem(commandId))
        ribbon.getTab(DevExpress.RichEdit.RibbonTabType.MailMerge)
            .insertItem(new DevExpress.RichEdit.RibbonButtonItem(commandId, "Switch document"), 0);
    ribbon.activeTabIndex = DevExpress.RichEdit.RibbonTabType.MailMerge;
});

Text

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 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;

Insert text at the cursor position

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

JS

var subDocument = richEdit.selection.activeSubDocument;
var position = richEdit.selection.active;
subDocument.insertText(position, 'text');

Insert text at the end of the active sub-document

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

JS

var subDocument = richEdit.selection.activeSubDocument;
var position = subDocument.length - 1;
subDocument.insertText(position, 'text'); 

Insert text at the end of the main sub-document

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

JS

var subDocument = richEdit.document.subDocuments.main;
subDocument.insertText(subDocument.length - 1, 'text'); 

// or
// richEdit.document.insertText(richEdit.document.length - 1, 'text');

Insert text at the start of a header

Related members: insertText(position, text), SectionCollection getHeader, getFooter, HeaderFooterType

JS

var createHeaderIfNotExist = true;
var section = richEdit.document.sections.getByIndex(0);
var subDocument = section.getHeader(DevExpress.RichEdit.HeaderFooterType.Primary, createHeaderIfNotExist);
var position = 0;
subDocument.insertText(position, 'text');

Delete all text in the active sub-document

Related members: deleteText(interval), activeSubDocument, interval

JS

var subDocument = richEdit.selection.activeSubDocument;
subDocument.deleteText(subDocument.interval);

Apply character properties to inserted text

Related members: setCharacterProperties(interval, characterProperties), insertText(position, text), beginUpdate, beginTransaction, activeSubDocument, active

JS

var subDocument = richEdit.selection.activeSubDocument;
var position = richEdit.selection.active;
var characterProperties = {
    bold: true,
    fontName: richEdit.document.fonts.getByIndex(0).name,
};

richEdit.history.beginTransaction();
richEdit.beginUpdate();
var interval = subDocument.insertText(position, "text");
subDocument.setCharacterProperties(interval, characterProperties);
richEdit.endUpdate();
richEdit.history.endTransaction();

Insert mail template

Related members: insertText(position, text), insertParagraph(position), activeSubDocument, active, beginUpdate, beginTransaction, Interval, focus, setSelection(position)

JS

var subDocument = richEdit.selection.activeSubDocument;
var position = richEdit.selection.active;
var templateText = '[Type your text here]';

richEdit.beginUpdate();
richEdit.history.beginTransaction();

position = subDocument.insertParagraph(position).interval.end;
position = subDocument.insertParagraph(position).interval.end;
position = subDocument.insertText(position, 'Dear Mr Stanley,').end;
position = subDocument.insertParagraph(position).interval.end;
var tmpTextInterval = subDocument.insertText(position, templateText);
position = tmpTextInterval.end;
position = subDocument.insertParagraph(position).interval.end;

richEdit.endUpdate();
richEdit.history.endTransaction();

richEdit.selection.setSelection(tmpTextInterval);
richEdit.focus();

Paragraph

Insert a paragraph at the cursor position

Related members: insertParagraph(position), activeSubDocument, active

JS

var subDocument = richEdit.selection.activeSubDocument;
var position = richEdit.selection.active;
var paragraph = subDocument.insertParagraph(position);

Apply properties to a paragraph

Related members: Paragraph properties, find(position), alignment, beginUpdate, beginTransaction, activeSubDocument, active, insertText(position, text)

JS

var subDocument = richEdit.selection.activeSubDocument;
var position = richEdit.selection.active;

rich.history.beginTransaction();
rich.beginUpdate();  
var textInterval = subDocument.insertText(position, "Centered text");
subDocument.paragraphs.find(textInterval).forEach(function (paragraph) {
    paragraph.properties = { 
        alignment: DevExpress.RichEdit.ParagraphAlignment.Center,
    }; 
});
rich.endUpdate();  
rich.history.endTransaction();

Field

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: create(position), fields, Field, activeSubDocument, active, getText

JS

var subDocument = richEdit.selection.activeSubDocument;
var field = subDocument.fields.create(richEdit.selection.active, 'time');
field.update(function(self) {
    console.log('Result: ' + subDocument.getText(self.resultInterval));
});

Remove a field

Related members: fields, delete

JS

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

Update all fields

Related members: fields, updateAllFields, UpdateFieldsOptions

JS

var doInAllSubDocuments = true;
var updateTocFields = true;
var options = new DevExpress.RichEdit.UpdateFieldsOptions(doInAllSubDocuments, updateTocFields);
richEdit.document.fields.updateAllFields(function() {
    console.log('Updated');
}, options);

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(); }")
...

Update fields by name

Related members: fields, name, FieldName, update

JS

rich.beginUpdate();
rich.history.beginTransaction();
for(var i = 0, field; field = rich.document.fields.getByIndex(i); i++)
    if (field.name == DevExpress.RichEdit.FieldName.FillIn)
        field.update();
rich.history.endTransaction();
rich.endUpdate();

Update all fields and highlight the result

Related members: beginUpdate, beginTransaction, updateAllFields, UpdateFieldsOptions, fields, setCharacterProperties(interval, characterProperties),

JS

richEdit.history.beginTransaction();
richEdit.beginUpdate();
richEdit.document.fields.updateAllFields(function () {  
    richEdit.document.subDocuments.forEach(function (subDocument) {
        for (var i = 0, field; field = subDocument.fields.getByIndex(i); i++)
            richEdit.document.setCharacterProperties(field.resultInterval, { bold: true });
    });
    richEdit.endUpdate();
    richEdit.history.endTransaction();  
}, new DevExpress.RichEdit.UpdateFieldsOptions(true, false));  

Hyperlink

Get URLs of all hyperlinks in the main sub-document

Related members: hyperlinks, Hyperlink, hyperlinkInfo

JS

// Gets URLs of all hyperlinks in the main sub-document
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);

Bookmark

Get a bookmark interval by its name

Related members: bookmarks, find(position), interval

JS

var bookmark = richEdit.document.bookmarks.find('bookmarkName')[0];
if (bookmark) {
    var bookmarkInterval = bookmark.interval;
}

Insert a bookmark

Related members: create(interval, name), bookmarks, Interval, insertText(position, text)

JS

var textInterval = richEdit.document.insertText(0, 'text');
var bookmark = richEdit.document.bookmarks.create(textInterval, 'bookmarkName');

Scroll to a bookmark

Related members: bookmarks, find(position), goTo

JS

var bookmark = richEdit.document.bookmarks.find('bookmarkName')[0];
if (bookmark)
    bookmark.goTo();

Picture

Insert a picture at a certain position

Related members: insertPicture(position, base64), activeSubDocument, active

JS

var subDocument = richEdit.selection.activeSubDocument;
var position = richEdit.selection.active;
var image = ""; // base64 or url
var width = richEdit.unitConverter.pixelsToTwips(100);
var height = richEdit.unitConverter.pixelsToTwips(100);
var size = new DevExpress.RichEdit.Size(width, height);
subDocument.insertPicture(position, image, size, function(interval) { console.log("Picture loaded"); });

Header and Footer

Create a header and populate it with a text

Related members: SectionCollection, getHeader, HeaderFooterType

JS

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

Table

Create a table at the certain position

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

JS

var columnCount = 5;
var rowCount = 5;
var subDocument = richEdit.selection.activeSubDocument;
var position = richEdit.selection.active;
var table = subDocument.tables.create(position, columnCount, rowCount);

Create a table at the specified position and populate it with content

Related members: create(position, columnCount, rowCount), beginUpdate, beginTransaction, activeSubDocument, active, tables, rows, cells, insertText(position, text)

JS

richEdit.beginUpdate();
richEdit.history.beginTransaction();
var subDocument = richEdit.selection.activeSubDocument;
var position = richEdit.selection.active;
var columnCount = 5;
var rowCount = 5;
var table = subDocument.tables.create(position, columnCount, rowCount);
for (var rowInd = 0, row; row = table.rows.getByIndex(rowInd); rowInd++) {
    for (var cellInd = 0, cell; cell = row.cells.getByIndex(cellInd); cellInd++) {
        subDocument.insertText(cell.interval.start, "Row[" + rowInd + "].Cell[" + cellInd + "]");
    }
}
richEdit.history.endTransaction();
richEdit.endUpdate();