Value Binding in Blazor RichTextEditor

12 Mar 20252 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 the SaveInterval property.

  • If AutoSaveOnIdle is set to false, the editor saves the content at the regular interval of milliseconds specified in the SaveInterval 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.