You are viewing help content for pre-release software. This document and the features it describes are subject to change. Switch to the current version.

DxRichEdit Class

A Rich Text Editor component.

Namespace: DevExpress.Blazor.RichEdit

Assembly: DevExpress.Blazor.RichEdit.v21.2.dll

Declaration

public class DxRichEdit :
    DxComponentBase<RichEditJSInteropProxy>,
    IRichEditJSInteropProxyServer,
    IJSCallback

Remarks

The DevExpress Rich Text Editor for Blazor is a Word-inspired component that allows users to create, open, modify, print, save, and convert rich-formatted text files.

Important

The Rich Text Editor is currently only available for the Blazor Server hosting model.

Rich Text Editor Overview

You can find the Rich Text Editor API in the DevExpress.Blazor.RichEdit namespace.

Run Demo: Rich Text Editor — Overview

Add a Rich Text Editor to a Project

Follow the steps below to add the Rich Text Editor component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server application.
  2. Add the <DxRichEdit /> markup to a Razor page.

If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components and follow the step-by-step instructions.

Read Tutorial: Get Started with Rich Text Editor

Document Management

Use the DocumentContent property to bind DxRichEdit to a document in Office Open XML format (.docx).

<DxRichEdit 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 editor’s methods allow you to create, open, and export documents.

Users can select commands on the File ribbon tab to manage documents.

File Ribbon Tab

Formatting Features

The Rich Text Editor allows you to perform the following actions:

Floating Text Boxes and Images

The editor allows users to insert text boxes and images in popular formats (JPEG, PNG, and GIF) into a document. Users can create, move, resize, and rotate floating objects.

Field Support

The Rich Text Editor supports fields - special placeholders for data that can change (for instance, a page number or date and time). The control replaces these placeholders with actual data when it renders or prints a document.

Rich Text Editor Overview

The DOCVARIABLE field allows you to insert complex content. Handle the CalculateDocumentVariable event to calculate and specify the field’s value.

<DxRichEdit  @bind-Selection="@selection" @ref="@richEdit" 
    CalculateDocumentVariable="@(async x => await OnCalculateDocumentVariable(x))" />
@code {
    DxRichEdit richEdit { get; set; }
    Selection selection { 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.DocumentAPI.Fields.CreateAsync(richEdit.Selection.CaretPosition, "DOCVARIABLE paragraphCount");
            await richEdit.DocumentAPI.AddTextAsync("Number of paragraphs: ");
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
        @* ... *@
    async Task OnCalculateDocumentVariable(CalculateDocumentVariableEventArgs e) {
        try {
            switch (e.VariableName) {
                case "paragraphCount":
                    var paragraphs = await richEdit.DocumentAPI.Paragraphs.GetAllAsync();
                    e.Value = paragraphs.Count.ToString();
                    break;
                default:
                    break;
            }
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
    }
}

Document Editing API

The DxRichEdit component allows you to modify the open document programmatically. Use the DocumentAPI property to access the document content. The Selection property returns information about the current selection.

<DxRichEdit @bind-Selection="@selection" @ref="@richEdit" />
@code {
    DxRichEdit richEdit { get; set; }
    Selection selection { 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 {
            documentAPI = richEdit.DocumentAPI;
            await documentAPI.Sections.CreateAsync(richEdit.Selection.CaretPosition, SectionBreakType.EvenPage);      
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Run Demo: RichEdit – Document API

Simple View

The RichEdit can adjust a document so that it occupies the entire control’s content area and ignores the page’s layout. Set the ViewType property to Simple to enable this mode.

<DxRichEdit ViewType="ViewType.Simple" />

Users can click buttons on the View ribbon tab to switch the active view.

Simple View

You can handle the ViewTypeChanged event to be notified when the view type changes.

Run Demo: RichEdit – Simple View

Localization

You can localize the Rich Text Edit in different languages and cultures. Refer to the following section for more information: Localization.

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.RichEdit.Internal.RichEditJSInteropProxy>
DxRichEdit
See Also