Blazor Rich Text Editor - Localization and Text Customization Enhancements (v21.2)

ASP.NET Team Blog
22 November 2021

As you may know, we released a preview version of our Rich Edit Blazor component last July. We are happy to announce the official release of the DevExpress Rich Text Editor for Blazor in our v21.2 release cycle.

For those unfamiliar with this product, the DevExpress Blazor Rich Text Edit component allows you to quickly incorporate Microsoft Word-inspired text editing functionality for web apps targeting the Blazor platform.

Blazor Rich Text and Word Document Editor

Our Blazor Rich Text Editor/Word Processing component includes all features announced with the EAP version and the following new capabilities:

Localization

As you may know, DevExpress Blazor components ship with localizable resources for UI elements (such as button captions, menu items, error messages, and dialog boxes). You can now also localize our Blazor Rich Text Editor for specific languages and locales.

DevExpress Blazor - Localization

To localize your Blazor application, please follow the instructions outlined in the following help topic: Blazor Localization

Context Menu

Our Rich Text Editor for Blazor ships with a built-in context/popup menu (able to display both single and multi-level menu items). As you would expect, this context/popup menu allows users to quickly access word-processing-related functions/operations.

The menu itself displays contextually relevant options when a user right-clicks on a given document element.

Blazor rich text editor image context menu

New Blazor Word Processing API

v21.2 includes the following new Rich Text Editor API members:

  • ReadOnly - specifies whether users can edit a document.
  • Modified - indicates if the current document includes unsaved changes.
  • DocumentFormat - allows you to set a base format for storing document content. Specify this option so that you can open and save document formats other than OpenXml.
  • DocumentLoaded - this event fires after the control has successfully created or opened a document.
  • DocumentContentChanging - use this event to edit the document before saving it.
  • SaveDocumentAsync - this asynchronous method saves the document and raises the DocumentContentChanged event once saved.
  • GotFocus - fires after the Rich Text Editor receives focus.
  • LostFocus - triggers after the Rich Text Editor loses focus.

New Dialogs

v21.1.5 introduced the Table and Hyperlink dialogs. In v21.2, we added the following UI dialogs to help users edit documents within our Blazor Rich Text Editor:

  • Font - includes all available font settings: name, style, size, color, and more.

Blazor rich text editor font customization dialog

  • Paragraph - displays paragraph settings, including options for "Indents and Spacing" and "Line and Page Breaks".
  • Bookmark - allows a user to configure, insert and delete document bookmarks.
  • Tabs - users can add, remove, and customize settings for document tab stops.
  • Insert Cells - allows a user to insert a group of cells into a table.
  • Delete Cells - can be used to delete a selected group of table cells.
  • Split Table Cells - allows a user to split table cells.
  • Find and Replace - can be used to find and optionally replace small text blocks within the document.

Blazor rich text editor search and replace

  • Page Setup - contains page settings such as paper size, page margins, and layout options.

Blazor rich text editor page size settings

  • Alert - a special dialog used to display notifications and errors to end-users.

Try these new UI dialogs now: Online Demo.

Your Feedback Matters

As always, we welcome your feedback. Please let us know what you think of our Blazor Rich Text Edit control by leaving a comment below or creating a support ticket. We'll be happy to follow up.

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!
ROY ZEGARRA 1
ROY ZEGARRA 1
Excellent, however I see a very big limitation! It only works for Blazor Server. I'm looking forward to seeing this work on Blazor Wasm
22 November 2021
Decoder4
Decoder4
Nice, but important feature is missing, adding fields with mail merge. Any news on that subject ?
22 November 2021
CRM-4d92c4ef-3330-4702-b3e6-12ee2c5ccfa4
David

This component is great and we are using it already.

One feature we would love is the ability to add in our own custom menu items in the main menu and in the context menu. Is this on the roadmap by any chance?

Our use case is pretty simple. We are using the control as a template editor and we want our users to easily be able to add a pre-defined set of replacement fields to the document e.g. {DocumentName}.

Thanks!

23 November 2021
Vladislav Kiselev
Vladislav Kiselev
Will it work on WebAssembly?
23 November 2021
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)
Hi,


I appreciate your interest in our component. We plan to support Blazor WebAssembly in our Rich Text Edit in the future versions.

@David,
The ribbon customization is in our v22.1 plans. We postpone the context menu customization to the second half of 2022.

@Decoder4
We expect to deliver Mail Merge in the next v22.1

Now we are working on 2022 plans. We will publish our roadmap in a couple of months. I hope this will make our Rich Text Edit plans transparent for you.

 

23 November 2021
Sigurd Decroos _
Sigurd Decroos _
Please, DevExtreme version... 
24 November 2021
Rick Mathers
Rick Mathers
Please Html editor 
24 November 2021

Please login or register to post comments.