Blazor Rich Text Editor for Word, RTF, and Text document editing (available in v21.1)

As you may already know, our most recent Blazor release (v21.1) ships with a new Rich Text Editor component for Blazor (available as a Community Tech Preview - CTP). Much like its ASP.NET MVC counterpart, this new Blazor component supports popular document formats (DOCX, RTF, TXT) and allows you to incorporate a Microsoft Word-inspired user experience within your Blazor Server applications.

Preview Release

At present, our Rich Text Editor CTP supports Blazor Server applications and includes the following built-in features:

• A Microsoft Word-inspired Text Editor user (including a Ribbon)
• API to create, open, and save documents (DOCX, RTF, and TXT)
• Content Formatting: Character Formatting, Paragraph Formatting, Floating Objects (images and text boxes)
• Content Layout Customization: Document Sections, Multi-column Layouts, Headers, and Footers
• Document Printing
• Simple View (Web Layout) Mode

Demo

Character and Paragraph Formatting

The DevExpress Rich Text Editor for Blazor ships with the following text formatting features:

• font settings (select font name, font size)
• character style (bold, italics, underlined)
• background and foreground color

End-users can easily modify entire paragraphs using the control's integrated UI formatting options: paragraph alignment, spacing and indentation, bullets, and numbering.

Additionally, the editor includes built-in UI to edit the document's header/footer and insert a Table of Contents.

Document Management and Document API

Our new Blazor Rich Text control supports asynchronous data binding and allows you to programmatically load document content as needs dictate. Use the DocumentContent property to specify the server-side variable used to store document content you need to load.

<DxRichEdit Id="richEdit" DocumentContent="@documentContent" CssClass="w-100 ch-480" />

@code {
  byte[] documentContent;
  protected override async Task OnInitializedAsync() {
    documentContent = await File.ReadAllBytesAsync(Path.Combine(AppContext.BaseDirectory, "Data\\Documents\\Example.docx"));

    await base.OnInitializedAsync();
  }
}

Our Rich Text Editor for Blazor also includes a special Document API to modify an open document programmatically. Use the DocumentAPI property to dynamically access the document content.

Demo

Floating Objects

The DevExpress Rich Text Editor for Blazor allows your end users to insert text boxes and images of popular formats (JPEG, PNG, and GIF) into a document. Users can create, move, resize, and rotate floating objects.

These floating objects, text boxes and images, can be anchored within a document in one of two ways: either inline (the object is displayed within the text) or floating. Floating means the object is strictly positioned, absolutely or relatively within the document, regardless of text flow. Of course, users can still freely position and scale floating objects using the control's UI.

Fields

In our Rich Text Editor for Blazor, document fields are special placeholders for non-static data that might change (for instance, a page number or date and time). These placeholders are replaced with actual data when the document is rendered for display or print. Standard fields include DATE, TIME, PAGE, NUMPAGES, TOC, and more.

To store custom (non-standard) information in your document, use the DOCVARIABLE field code. This field allows you to insert the required content programmatically by using the CalculateDocumentVariable event.

Printing

We've added support for WYSIWYG printing to generate a printout that closely mirrors the control's screen layout. When a user clicks the Print ribbon item, the editor will open a new browser tab, render the current document, then call the browser's print dialog.

Simple View

The Simple View mode allows you to display document content without page layout elements (margins, headers, or footers). This view can be useful when you need to display your document on a limited-width page.

You can enable this mode in two ways:

1. Use the Editor's Ribbon UI (click the Simple View command)
2. Set the ViewType property to Simple

Demo

Feedback

As always, we appreciate your feedback. If you have questions on our Blazor RTF control, please post your comment below or submit a support ticket via the DevExpress Support Center.