devexpress-examples/blazor-dxrichedit-place-control-in-edit-form

Place a Rich Text Editor component inside an Edit Form and bind the component's content to a data field.

Blazor Rich Text Editor - How to use the component inside an EditForm

You can place various DexExpress Blazor components inside an Edit Form to process/validate user input. In this example, an edit form is bound to a data source and includes the following components:

• Text boxes
  The Name, Address, and Phone text boxes are bound to corresponding data fields.

• Rich Text Editor
  Displays the document whose path is specified in the Notes field.

• Buttons
  The Next and Previous buttons allow users to navigate data records. The Save button saves changes to the bound data source.

Overview

You can place our Blazor Rich Text Editor component inside an Edit Form. To bind component content to a data field, use one of the following methods:

The field contains a path to a document

Follow the steps below:

1. Assign the document's format to the DocumentFormat property.
2. To open this document in our Blazor Rich Text Editor, assign the document's content as a byte array to the DocumentContent property. In this example, the component updates its content when a user clicks the Next or Previous button (when switching between data records).
3. Write the DocumentContent property value back to the document to save changes.

If the Rich Text Editor does not support a given document's format, use third-party server libraries (such as the DevExpress Office File API) to convert the document from its original format to a supported format (and vice versa).

The field contains a document

Our Blazor Rich Text Editor allows you to bind its content directly to a field that stores the document (assuming the document is in a supported format). To proceed with this implementation, follow the steps below:

1. Assign the document's format to the DocumentFormat property.
2. Bind the DocumentContent property to the field.

The control updates bound field values each time the DocumentContentChanged event occurs. Call the SaveDocumentAsync method to raise this event on-demand.

Files to Look At

• Index.razor
• Employee.cs
• SampleData.cs

Documentation

• Document Management in the Rich Text Editor
• Rich Text Editor Examples

More Examples

• Blazor Rich Text Editor - How to export a document to a file (HTML format)