This section explains how to bind the Value
to the Rich Text Editor component that can be achieved in the following ways:
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>";
}
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>";
}
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.