Value Binding in Blazor RichTextEditor
30 Aug 20242 minutes to read
You can bind the Value to the editor component, by using the @bind-Value
attribute and it supports string type. If component value has been changed, it will affect all the places where you bind the variable for the bind-Value attribute.
@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>";
}
Auto save
The Rich Text Editor saves its content automatically when you focus out the editor, and you can save its content automatically at regular intervals based on the SaveInterval and AutoSaveOnIdle properties while editing.
-
If
AutoSaveOnIdle
is set to true, the content is saved if the editor is idle for the number of milliseconds specified in theSaveInterval
property. -
If
AutoSaveOnIdle
is set to false, the editor saves the content at the regular interval of milliseconds specified in theSaveInterval
property.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor ID="AutoSave" SaveInterval="saveInterval" AutoSaveOnIdle="true" Value="@Value">
<p>Type or edit the content to be saved automatically in the editor </p>
<RichTextEditorEvents ValueChange="UpdateStatus" />
</SfRichTextEditor>
@code{
private string Value { get; set; } = "<p>Start to type a content to save </p>";
private int saveInterval { get; set; } = 5000;
private void UpdateStatus(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
{
// Place the codes here, which save the Rich Text Editor value into database.
this.Value = args.Value;
}
}
Get editor content
You can get the RichTextEditor’s edited content by using the ValueChange event.
When the user changes the content, the ValueChange
event is invoked on every SaveInterval time or when the editor loses focus.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor @bind-Value="@Value" @ref="RteObj">
<RichTextEditorEvents ValueChange="@ValueChangeHandler">
</RichTextEditorEvents>
</SfRichTextEditor>
@code {
SfRichTextEditor RteObj;
private string Value { get; set; } = "<p>Syncfusion RichTextEditor</p>";
public void ValueChangeHandler(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
{
//here you can can get the editor value using args.value
this.Value = args.Value;
}
}
NOTE
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 know how to render and configure the rich text editor tools.