blazor-401891-components-rich-text-editor.md
The DevExpress Rich Text Editor for Blazor (DxRichEdit) allows you to integrate advanced text editing functionality into your project. It includes comprehensive text formatting features and ships with a rich collection of end-user options. You can find the Rich Text Editor API in the DevExpress.Blazor.RichEdit namespace.
Use the following guide to create your first project with a Rich Text Editor. The guide describes how to create a new project or incorporate the component into an existing Blazor app.
Read Tutorial: Get Started with Rich Text Editor
Note that the Rich Text Editor component requires the DevExpress.Blazor.RichEdit NuGet package to be installed.
Refer to the following list for the component API reference: DxRichEdit Members.
The Rich Text Editor supports the following document formats:
You can use the DevExpress Office File API library or a third-party server library to convert a document to other formats.
View Example: How to export a document to a file (DOC format)
The Rich Text Editor supports the following document elements:
The DevExpress Rich Text Editor ships with a built-in API that allows you to manage documents: create, open, save, print, and export.
Read Tutorial: Document Management
You can manage the document’s content: modify document elements, format text, and change the document layout.
Read Tutorial: Text Operations Run Demo: Document API
The Rich Text Editor supports fields - special instructions that generate content (for instance, a page number or date and time).
The mail merge functionality allows you to generate multiple documents based on a template and a bound external data source. For example, you can create catalogs, reports, or personalized letters. The component allows you to preview dynamic content in the opened template document and adjust it before the final mail merge operation.
Read Tutorial: Mail Merge Run Demo: Mail Merge
The Rich Text Editor allows you to use a built-in or custom service to check spelling. If you enable this functionality, the component underlines misspelled words with wavy red lines. Right-click a highlighted word to invoke a context menu. Menu commands allow you to correct a spelling error, ignore it, or add the selected word to a dictionary.
Read Tutorial: Spell Check Run Demo: Spell Check
View Example: How to Customize the Built-in Spell Check Services
The Rich Text Editor can display its menu bar as a ribbon or toolbar. You can access and modify tabs, groups, and items (commands) displayed in the menu bar. Refer to the following topic for the list of all available elements: Built-in Toolbar Elements.
Run Demo: Ribbon Customization Run Demo: Toolbar Customization
Handle the CustomizeContextMenu event to modify the Rich Text Editor’s default context menu items.
Run Demo: Context Menu Customization
The Rich Text Editor ships with pre-defined styles for paragraphs and tables. You can find the corresponding options on the Home tab for paragraphs, and on the Design tab for tables.
You can also apply a pre-defined style to a table in code. Refer to the following enumeration description for additional information: TableStyleOptions.
Users can change the document’s zoom level in the corresponding drop-down menu in the View ribbon tab.
Use the ZoomLevel property to specify the zoom level in code.
The Rich Text Editor can display a document so that it occupies the entire component’s content area. This view may not not reflect the actual page layout. Set the ViewType property to Simple to enable this view mode.
DevExpress AI-powered extension for Rich Text Editor adds AI-related commands to the editor’s context menu. The commands are designed to process text content.
Read Tutorial: Get Started with AI-powered Extension for Blazor Rich Text Editor
View Example: Rich Text Editor and HTML Editor for Blazor - How to integrate AI-powered extensions
You can localize the Rich Text Editor for different languages and cultures.