Document Management in the Rich Text Editor

• Sep 08, 2021
• 6 minutes to read

This section contains examples that demonstrate how to create, open, save, and export documents in the Rich Text Editor.

Document Formats

The Rich Text Editor supports the following document formats:

• Office Open XML Document (DOCX)
• Rich Text Format (RTF)
• Plain Text (TXT)

You can use third-party server libraries (for instance, DevExpress Office File API) to convert a document to a supported format.

Create a Document

Call the NewDocumentAsync() method to create a new document.

<DxRichEdit Id="richEdit" @ref="@richEdit" />

@code {
    DxRichEdit richEdit { get; set; }
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
        @* ... *@
            await richEdit.NewDocumentAsync();
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Open a Document

Use one of the following methods to open a document:

Bind the Rich Text Editor to a DOCX Document

Use the DocumentContent property to bind the Rich Text Editor to an Office Open XML document (DOCX).

@using System.IO;
@* ... *@
    <DxRichEdit Id="richEdit" DocumentContent="@documentContent" ViewType="ViewType.Simple" ActiveRibbonTabIndex="6" CssClass="w-100 ch-720" />

    @code {
        byte[] documentContent;

        protected override async Task OnInitializedAsync() {
            documentContent = await File.ReadAllBytesAsync(Path.Combine(AppContext.BaseDirectory, "Data\\Documents\\AlbertEinstein.docx"));
            await base.OnInitializedAsync();
        }
    }

The Rich Text Editor updates the DocumentContent property value in the following cases:

• An auto-save timeout expires.

• A user selects the File → Save ribbon command.

• A user presses CTRL+S.

Handle the DocumentContentChanged event to respond to the update.

Load a Document

Call a LoadDocumentAsync method overload to load a document.

Load a Document from a Byte Array

Call the LoadDocumentAsync(Byte[], DocumentFormat) method to load a document in a specified format from a byte array.

<DxRichEdit Id="richEdit" @ref="@richEdit" />

@code {
    DxRichEdit richEdit { get; set; }
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
        @* ... *@
            byte[] fileContent = Convert.FromBase64String("e1xydGYxXGRlZmYwe1xmb250dGJse1xmMCBDYWxpYnJpO319e1xjb2xvcnRibCA7XHJlZDBcZ3JlZW4wXGJsdWUyNTUgO1xyZWQyNTVcZ3JlZW4yNTVcYmx1ZTI1NSA7fXtcKlxkZWZjaHAgXGZzMjJ9e1xzdHlsZXNoZWV0IHtccWxcZnMyMiBOb3JtYWw7fXtcKlxjczFcZnMyMiBEZWZhdWx0IFBhcmFncmFwaCBGb250O317XCpcY3MyXGZzMjJcY2YxIEh5cGVybGluazt9e1wqXHRzM1x0c3Jvd2RcZnMyMlxxbFx0c3ZlcnRhbHRcdHNjZWxsY2JwYXQyXHRzY2VsbHBjdDBcY2x0eGxydGIgTm9ybWFsIFRhYmxlO319e1wqXGxpc3RvdmVycmlkZXRhYmxlfXtcaW5mb31cbm91aWNvbXBhdFxzcGx5dHduaW5lXGh0bWF1dHNwXGV4cHNocnRuXHNwbHRwZ3BhclxkZWZ0YWI3MjBcc2VjdGRcbWFyZ2xzeG4xNDQwXG1hcmdyc3huMTQ0MFxtYXJndHN4bjE0NDBcbWFyZ2JzeG4xNDQwXGhlYWRlcnk3MjBcZm9vdGVyeTcyMFxwZ3dzeG4xMjI0MFxwZ2hzeG4xNTg0MFxjb2xzMVxjb2xzeDcyMFxwYXJkXHBsYWluXHFse1xmczIyXGNmMFxjczEgRG9jdW1lbnQgdGV4dH1cZnMyMlxjZjBccGFyfQ==");
            richEdit.LoadDocumentAsync(fileContent, DocumentFormat.Rtf);
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Load a Document from a File

Call the LoadDocumentAsync(String) method to load a document from a specified file path. The Rich Text Editor automatically detects the document’s format. Override the Detect(String) method to implement your own format detection logic.

<DxRichEdit Id="richEdit" @ref="@richEdit" />

@code {
    DxRichEdit richEdit { get; set; }
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
        @* ... *@
            await richEdit.LoadDocumentAsync("C:\\Users\\Public\\annual-report.docx");
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Call the LoadDocumentAsync(String, DocumentFormat) method and pass the document format as a parameter to omit automatic detection and improve performance.

Load a Document from a Stream

Call the LoadDocumentAsync(Stream) method to load a document from a specified stream. The Rich Text Editor automatically detects the document’s format. Override the Detect(Stream) method to implement your own file format detection logic.

<DxRichEdit Id="richEdit" @ref="@richEdit" />

@code {
    DxRichEdit richEdit { get; set; }
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
        @* ... *@
            var fileStream = new FileStream("C:\\Users\\Public\\annual-report.docx", FileMode.Open);
            await richEdit.LoadDocumentAsync(fileStream);
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Call the LoadDocumentAsync(Stream, DocumentFormat) method and pass the document format as a parameter to omit automatic detection and improve performance.

Save a Document

The Rich Text Editor allows you to automatically save the content of a bound document. Assign a timeout value to the AutoSaveTimeout property to enable auto-save feature.

<DxRichEdit @ref="richEdit" Id="richEdit" AutoSaveTimeout="TimeSpan.FromMinutes(2)"
DocumentContent="@documentContent" DocumentContentChanged="OnDocumentContentChanged" />

@code {
    DxRichEdit richEdit { get; set; }
    byte[] documentContent { get; set; }
    string filePath = "C:\\Users\\Public\\annual-report.docx";

    async Task OnDocumentContentChanged(byte[] content) {
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
            documentContent = content;
            await richEdit.ExportDocumentAsync(filePath, DocumentFormat.OpenXml);
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
    }
}

Export a Document

Call an ExportDocumentAsync method overload to export an open document.

Export to a Byte Array

Call the ExportDocumentAsync(DocumentFormat) method to export the document to a byte array in a specified format.

<DxRichEdit @ref="richEdit1" Id="richEdit1" />
<DxRichEdit @ref="richEdit2" Id="richEdit2" />
@code {
    DxRichEdit richEdit1 { get; set; }
    DxRichEdit richEdit2 { get; set; }
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
            byte[] fileContent = await richEdit1.ExportDocumentAsync(DocumentFormat.Rtf);
            await richEdit2.LoadDocumentAsync(fileContent, DocumentFormat.Rtf);
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Export to a File

Call the ExportDocumentAsync(String, DocumentFormat) method to export the document to a file in a specified format.

<DxRichEdit Id="richEdit" @ref="@richEdit" />

@code {
    DxRichEdit richEdit { get; set; }
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
        @* ... *@
            await richEdit.ExportDocumentAsync("C:\\Users\\Public\\annual-report.rtf", DocumentFormat.Rtf);
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Export to a Stream

Call the ExportDocumentAsync(Stream, DocumentFormat) method to export the document to a stream in a specified format.

<DxRichEdit Id="richEdit" @ref="@richEdit" />

@code {
    DxRichEdit richEdit { get; set; }
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
        @* ... *@
            using (MemoryStream fileStream = new MemoryStream()) {
                await richEdit.ExportDocumentAsync(fileStream, DocumentFormat.Rtf);
                // ...
            }
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}