Value Binding in Blazor RichTextEditor

9 Oct 20252 minutes to read

The Blazor Rich Text Editor supports two-way data binding to its Value property using the @bind-Value attribute. The Value property accepts a string type. When the editor’s content is modified, the bound variable is automatically updated. Likewise, any changes to the variable will be reflected in the editor’s content.

@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 can automatically save its content based on the configuration of the SaveInterval and AutoSaveOnIdle properties. By default, the content is saved when the editor loses focus.

  • When AutoSaveOnIdle is true, the content is saved if the editor remains idle for the duration specified in the SaveInterval property (in milliseconds).

  • When AutoSaveOnIdle is false, the content is saved at the regular interval defined by the SaveInterval property.

The following example demonstrates how to use the ValueChange event to get a notification when the content is saved.

@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 retrieve the editor’s content using the ValueChange event. This event is triggered either when the editor loses focus or at the specified SaveInterval, allowing you to capture the latest content.

@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

To explore the Rich Text Editor’s features, visit the feature tour page. You can also refer to the Blazor Rich Text Editor demo to learn how to render and configure the component and its tools.