Data Binding in Blazor RichTextEditor component

This section explains how to bind the Value to the Rich Text Editor component that can be achieved in the following ways:

• One-way data binding
• Two-way data binding
• Dynamic value binding

One-way data binding

You can bind the value to the Rich Text Editor by using the Value property directly as string or from code-behind as the following example.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor Value="@Value" />

@code {
private string Value { get; set; } = "<p>Syncfusion RichTextEditor</p>";
}

Two-way data binding

The two-way data binding can be achieved by using the @bind-Value attribute from code-behind in Rich Text Editor.

The following example explains how to achieve two-way binding with textarea and the Rich Text Editor.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor @bind-Value="@Value" />

<br />

<textarea rows="5" cols="60" @bind="@Value" />

@code {
private string Value { get; set; } = "<p>Syncfusion RichTextEditor</p>";
}

Dynamic value binding

You can update the value dynamically by using the Value property.

The following example shows how to update a Rich Text Editor value dynamically on button click.

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.RichTextEditor

<SfButton @onclick="@Update">Update Value</SfButton>

<SfRichTextEditor Value="@Value" />

@code {
private string Value { get; set; } = "<p>Syncfusion RichTextEditor</p>";

private void Update()
{
    this.Value = "<p>Dynamic Value</p>";
}
}

You can refer to our Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to knows how to render and configure the rich text editor tools.