RichEdit Class

A client-side Rich Text Editor object.

Declaration

export class RichEdit

Properties

document Property

Provides access to document structural elements.

Declaration

readonly document: RichEditDocument

Property Value

Type	Description
RichEditDocument	An object that lists a RichEdit document’s structural elements.

Remarks

The document property provides access to information about document structural elements (such as sections, sub-documents, and tables).

JS

//reduces the document's font collection to the specified fonts
var myFonts = ['Arial', 'Calibri'];
richEdit.document.fonts.getAllFontNames().forEach(fontName => 
    myFonts.find(myFontName => 
        myFontName == fontName) ? null : richEdit.document.fonts.getByName(fontName).delete());

documentSaveFormat Property

Specifies the format in which the editor prepares the document for saving.

Declaration

documentSaveFormat: DocumentFormat

Property Value

Type	Description
DocumentFormat	The document format.

Remarks

When a user clicks the Save button or the saveDocument method is called, the Rich Text Editor converts the document’s content to base64 and invokes the Saving event.

Use the documentSaveFormat property to specify a format in which the document will be converted to base64.

fileName Property

Specifies the name of the downloaded file.

Declaration

fileName: string

Property Value

Type	Description
string	The file name.

Remarks

When you call the downloadDocument method, the method’s fileName parameter allows you to specify the downloaded file name.

If the parameter is not specified, this fileName property specifies the default file name.

JS

richEdit.fileName = "myDocument1";

fullScreen Property

Enables you to switch the full-screen mode of the Rich Text Editor.

Declaration

fullScreen: boolean

Property Value

Type	Description
boolean	true, if the Rich Text Editor is in full-screen mode; otherwise, false.

Remarks

In full-screen mode, the Rich Text Editor occupies the browser’s entire client region and can be resized with the browser window.

JS

richEdit.fullScreen = true;

history Property

Provides access to methods related to Rich Text Editor history.

Declaration

readonly history: History

Property Value

Type	Description
History	An object that contains history-related methods.

Remarks

JS

richEdit.history.undo();

layout Property

Provide access to the Rich Text Editor’s layout settings.

Declaration

readonly layout: RichEditLayout

Property Value

Type	Description
RichEditLayout	An object that contains layout settings.

Remarks

JS

richEdit.layout.showHiddenSymbols = true;
richEdit.layout.showTableGridLines = false;

loadingPanel Property

Provides access to settings related to loading panel functionality.

Declaration

readonly loadingPanel: LoadingPanel

Property Value

Type	Description
LoadingPanel	An object that contains settings related to a loading panel.

Remarks

The loadingPanel property allows you to perform the following actions:

• disable the loading panel;
• show and hide the loading panel manually;
• provide a custom loading panel.

richEdit.loadingPanel.show();
...
richEdit.loadingPanel.hide();

mailMergeOptions Property

Provides access to the options related to the mail merge functionality.

Declaration

readonly mailMergeOptions: MailMergeOptions

Property Value

Type	Description
MailMergeOptions	An object that contains mail-merge options.

Remarks

JS

var newDataSource = [
    { firstName: "John", lastName: "Heart" },
    { firstName: "Samantha", lastName: "Bright" },
    { firstName: "Brett", lastName: "Wade" }];
richEdit.mailMergeOptions.setDataSource(newDataSource);
richEdit.mailMergeOptions.activeRecordIndex = 3;

readOnly Property

Specifies whether document modifications are prohibited.

Declaration

readOnly: boolean

Property Value

Type	Description
boolean	true, if the document is in a read-only state; otherwise, false.

Remarks

JS

richEdit.readOnly = true; 

selection Property

Provides access to the selection in Rich Text Editor.

Declaration

readonly selection: RichEditSelection

Property Value

Type	Description
RichEditSelection	An object that contains members to work with the selection.

Remarks

JS

richEdit.selection.goToSubDocumentEnd();
richEdit.document.insertParagraph(richEdit.selection.active);
richEdit.document.hyperlinks.create(richEdit.selection.active+1, {text: "Visit our site", tooltip: "DevExpress site", url: "https://www.devexpress.com/"})

showHorizontalRuler Property

Specifies whether the horizontal ruler is shown.

Declaration

showHorizontalRuler: boolean

Property Value

Type	Description
boolean	true, if the ruler is visible; otherwise, false.

Remarks

JS

richEdit.showHorizontalRuler = true;

unitConverter Property

Allows you to convert units.

Declaration

readonly unitConverter: UnitConverter

Property Value

Type
UnitConverter

Remarks

JS

//sets the footer offset to 3 centimeters
richEdit.document.sections.getByIndex(0).footerOffset = richEdit.unitConverter.centimetersToTwips(3)

viewType Property

Specifies a document view layout type.

Declaration

viewType: ViewType

Property Value

Type	Description
ViewType	The document view type. 0 (zero) corresponds to the Simple view type; 1 corresponds to the PrintLayout view type.

Remarks

JS

richEdit.viewType = DevExpress.RichEdit.ViewType.PrintLayout;
// or
richEdit.viewType = 1;

Methods

adjust Method

Modifies the RichEdit’s size against the control’s container.

Declaration

adjust(): void

Remarks

The adjust method recalculates the size of the control’s client object to correctly display it, when the control’s parent container is dynamically changed on the client side.

assignShortcut(shortcut, callback) Method

Assign a shortcut to a function.

Declaration

assignShortcut(
    shortcut: ShortcutOptions,
    callback: () => void
): void

Parameters

Name	Type	Description
shortcut	ShortcutOptions	The shortcut options.
callback	() => void	A function to assign a shortcut.

Remarks

JS

// adds the Ctrl+1 shortcut
var shortcutOp = {keyCode: 49, ctrl: true, alt: false, shift: false, meta: false};
richEdit.assignShortcut(shortcutOp, function () { alert('your actions here'); });

beginUpdate Method

Locks the RichEdit to prevent its visual updates until the endUpdate method is called.

Declaration

beginUpdate(): void

Remarks

Enclose your code in the beginUpdate - endUpdate method calls to suppress the RichEdit’s visual updates and improve its performance when you perform multiple changes to a document.

Each call to beginUpdate must be paired with the endUpdate call. The beginUpdate method locks the RichEdit, so that it is not rendered after each modification. The endUpdate method unlocks the control to enable all the changes to take effect.

Use the try…finally statement to ensure that endUpdate is always called even if an exception occurs.

dispose Method

Releases resources used by the loading panel.

Declaration

dispose(): void

downloadDocument Method

Downloads the current document.

Declaration

downloadDocument(
    documentFormat?: DocumentFormat,
    fileName?: string
): void

Parameters

Name	Type	Description
documentFormat	DocumentFormat	The document format.
fileName	string	The name of the document.

Remarks

If the documentFormat parameter is not specified, the file is downloaded in OpenXml format (.docx).

If the fileName parameter is not specified, the file is downloaded with a name specified by the fileName property.

JS

//downloads the myDocument.txt file
richEdit.downloadDocument(DevExpress.RichEdit.DocumentFormat.PlainText, "myDocument");

endUpdate Method

Unlocks the RichEdit object after a call to the beginUpdate method and causes an immediate visual update.

Declaration

endUpdate(): void

Remarks

Enclose your code in the beginUpdate - endUpdate method calls to suppress the RichEdit’s visual updates and improve its performance when you perform multiple changes to a document.

Each call to beginUpdate must be paired with the endUpdate call. The beginUpdate method locks the RichEdit, so that it is not rendered after each modification. The endUpdate method unlocks the control to enable all the changes to take effect.

Use the try…finally statement to ensure that endUpdate is always called even if an exception occurs.

focus Method

Sets input focus to the RichEdit.

Declaration

focus(): void

Remarks

JS

function onDocumentLoaded(s, e) {
    s.document.insertText(0, 'Dear Mr Stanley,');
    s.document.insertParagraph(s.document.length);
    var startPosition = s.document.length;
    s.document.insertParagraph(startPosition);
    s.document.insertText(startPosition, '[Type your text here]');
    s.selection.setSelection(new DevExpress.RichEdit.Interval(startPosition, s.document.length - startPosition));
    s.focus();
}

Razor C#

@(Html.DevExpress().RichEdit("DemoRichEdit")
   .OnDocumentLoaded("onDocumentLoaded")
   .Height(600)
   .ConfirmOnLosingChanges(c => c.Enabled(false))
)

For a full example, see Ribbon Customization demo.

mailMerge(callback) Method

Merges the bound data to a document template and exports the result.

Declaration

mailMerge(
    callback: (blob: Blob) => void,
    mergeMode?: MergeMode,
    documentFormat?: DocumentFormat,
    exportFrom?: number,
    exportRecordsCount?: number
): void

Parameters

Name	Type	Description
callback	(blob: Blob) => void	A function that is called when the merged document is ready.
mergeMode	MergeMode	The delimiter that starts the new merged range.
documentFormat	DocumentFormat	The exported document format.
exportFrom	number	The number of the first exported record in a data source.
exportRecordsCount	number	The number of records to export.

newDocument Method

Creates and opens a new document.

Declaration

newDocument(): void

Remarks

JS

richEdit.newDocument();

openDocument Method

Opens the specified document or the Open dialog.

Declaration

openDocument(
    base64?: string,
    fileName?: string,
    documentFormat?: DocumentFormat,
    callback?: (importSuccess: boolean) => void
): void

Parameters

Name	Type	Description
base64	string	A file in string representation that is encoded with base-64 digits. The file must have the following structure: data:[<MIME-type>][;charset=<encoding>][;base64],<data>
fileName	string	A file name, that is assigned to the fileName property.
documentFormat	DocumentFormat	A document format. This property is used when the base64 parameter does not contain information about a MIME type. If both values are specified, an exception is thrown.
callback	(importSuccess: boolean) => void	A function that is called after a document is opened and allows you to react to an attempt to open an invalid document. If this parameter is not specified and the opened file is not valid, the RichEdit displays an error message.

Remarks

• Call the method with parameters to open a particular document.

JS

var documentAsBase64 = "UEsDBAoAAAAAACF<...>DAAA8NQAAAAA="
richEdit.openDocument(documentAsBase64, "DocumentName.docx", DevExpress.RichEdit.DocumentFormat.OpenXml)

• Call the method without parameters to invoke the Open dialog.

JS

richEdit.openDocument();

If the opened file is not valid, the RichEdit opens a new document.

printDocument Method

Invokes a browser-specific Print dialog that can be used to print the current document.

Declaration

printDocument(): void

Remarks

JS

richEdit.printDocument();

saveDocument Method

Invokes the Saving event.

Declaration

saveDocument(
    documentFormat?: DocumentFormat,
    reason?: string
): void

Parameters

Name	Type	Description
documentFormat	DocumentFormat	The document format.
reason	string	A value that identifies the reason why the document saving process starts.

Remarks

JS

richEdit.saveDocument();

Use the OnSaving(String) method to assign a handler to the Saving event.