The requested page is not available for the requested platform. You are viewing the content for Default platform.

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).

//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());

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.

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.

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

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

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

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

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

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

richEdit.showHorizontalRuler = true;

unitConverter Property

Allows you to convert units.

Declaration

readonly unitConverter: UnitConverter

Property Value

Type Description
UnitConverter

Remarks

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

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

Methods

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

// 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.

downloadDocument Method

Downloads the current document.

Declaration

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

Optional Parameters

Name Type Default Description
documentFormat DocumentFormat null

The document format.

fileName string null

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.

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

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

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.

Optional Parameters

Name Type Default Description
mergeMode MergeMode null

The delimiter that starts the new merged range.

documentFormat DocumentFormat null

The exported document format.

exportFrom number null

The number of the first exported record in a data source.

exportRecordsCount number null

The number of records to export.

newDocument Method

Creates and opens a new document.

Declaration

newDocument(): void

Remarks

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

Optional Parameters

Name Type Default Description
base64 string null

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 null

A file name, that is assigned to the fileName property.

documentFormat DocumentFormat null

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 null

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.
var documentAsBase64 = "UEsDBAoAAAAAACF<...>DAAA8NQAAAAA="
richEdit.openDocument(documentAsBase64, "DocumentName.docx", DevExpress.RichEdit.DocumentFormat.OpenXml)
  • Call the method without parameters to invoke the Open dialog.
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

richEdit.printDocument();

saveDocument Method

Invokes the Saving event.

Declaration

saveDocument(documentFormat?: DocumentFormat): void

Optional Parameters

Name Type Default Description
documentFormat DocumentFormat null

The document format.

Remarks

richEdit.saveDocument();

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

See Also