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

ASP.NET Team Blog
16 July 2021

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

DevExpress Blazor Rich Text Editor

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.

DevExpress Blazor Rich Text Editor - Floating Objects

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

DevExpress Blazor Rich Text Editor - Simple View

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.

FREE DevExpress Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
Sigurd Decroos _
Sigurd Decroos _
When is a DevExtreme version coming please?
19 July 2021
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Sigurd,

I recommend you take a look at the DevExtreme HTML Editor. It has many of the features of a WYSIWYG editor.

19 July 2021

Please login or register to post comments.