DxRichEdit Class
A Rich Text Editor component.
Namespace: DevExpress.Blazor.RichEdit
Assembly: DevExpress.Blazor.RichEdit.v21.1.dll
NuGet Package: DevExpress.Blazor.RichEdit
Declaration
public class DxRichEdit :
DxComponentBase<RichEditJSInteropProxy>,
IRichEditJSInteropProxyServer,
IJSCallbackRemarks
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 available as a community technology preview (CTP) for the Blazor Server hosting model.
You can find the Rich Text Editor API in the DevExpress.Blazor.RichEdit namespace.
Add a Rich Text Editor to a Project
Follow the steps below to add the Rich Text Editor component to an application:
- Use a DevExpress Project Template to create a new Blazor Server application.
- 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.
Document Management
Use the DocumentContent property to bind DxRichEdit to a document in Office Open XML format (.docx).
<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 editor’s methods allow you to create, open, and export documents.
Users can select commands on the File ribbon tab to manage documents.
Formatting Features
The Rich Text Editor allows you to perform the following actions:
- Format characters and paragraphs.
- Create and modify bulleted, numbered, and multi-level lists.
- Insert and modify bookmarks, hyperlinks, and tables.
- Divide a document into different sections with individual page settings.
- Specify different headers and footers for the first page, odd and even pages, and each section.
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.
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" Id="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 Id="myRich" @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}");
}
}
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.
You can handle the ViewTypeChanged event to be notified when the view type changes.