Value Binding in Blazor RichTextEditor

13 Jun 20222 minutes to read

You can bind the Value to the editor component, by using the @bind-Value attribute. If component value has been changed, it will affect all the places where the variable is bound 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.
    AutoSaveOnIdle is set to true in this demo, and the SaveInterval is set to 5 seconds.

@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 also get the RichTextEditor’s edited content by using the ValueChange event to get the updated edited value.

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;
    }
}

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.