how do I bind a blazorise RichTextEdit component to a model property

Question

I am attempting to use a blazorise RichTextEdit component within a form. I cannot seem to get the value to be set initially to the value of a provided model property.

<Form Model="@company">
    <Validations @ref="validations" Mode="ValidationMode.Auto" ValidateOnLoad="false" Model="@model">
        <Validation>
            <Field>
                <FieldLabel>Company Website</FieldLabel>
                <TextEdit Role="TextRole.Url" @bind-Text="@model.Property1" Placeholder="Enter your website" Size="Size.Large">
                    <Feedback>
                        <ValidationError />
                    </Feedback>
                </TextEdit>
            </Field>
        </Validation>
        <Field>
            <FieldLabel>About</FieldLabel>
            <RichTextEdit @ref="richTextEditRef"
                          ContentChanged="@OnContentChanged"
                          Theme="RichTextEditTheme.Snow"
                          PlaceHolder="Tell us about the company..."
                          SubmitOnEnter="false"
                          ToolbarPosition="Placement.Top">
                <Editor></Editor>
                <Toolbar>
                    <RichTextEditToolbarGroup>
                        <RichTextEditToolbarButton Action="RichTextEditAction.Bold" />
                        <RichTextEditToolbarButton Action="RichTextEditAction.Italic" />
                        <RichTextEditToolbarSelect Action="RichTextEditAction.Size">
                            <RichTextEditToolbarSelectItem Value="small" />
                            <RichTextEditToolbarSelectItem Selected="true" />
                            <RichTextEditToolbarSelectItem Value="large" />
                            <RichTextEditToolbarSelectItem Value="huge">Very Big</RichTextEditToolbarSelectItem>
                        </RichTextEditToolbarSelect>
                        <RichTextEditToolbarButton Action="RichTextEditAction.List" Value="ordered" />
                        <RichTextEditToolbarButton Action="RichTextEditAction.List" Value="bullet" />
                    </RichTextEditToolbarGroup>
                    <!-- Custom toolbar content -->
                    <RichTextEditToolbarGroup Float="Float.Right">
                    </RichTextEditToolbarGroup>
                </Toolbar>
            </RichTextEdit>
        </Field>
    </Validations>
    <Button Color="Color.Success" Clicked="@Submit">Save</Button>
</Form>

@code {
    private Model model { get; set; } = new Model();
    private RichTextEdit richTextEditRef;

    Validations validations;

    protected override async Task OnInitializedAsync()
    {
        model = await modelService.GetByAccount();
        //await richTextEditRef.SetHtmlAsync(model.Property2);
    }

    public async Task OnContentChanged()
    {
        model.Property2 = await richTextEditRef.GetHtmlAsync();
    }

    async void Submit()
    {
        Console.WriteLine("Form Submitted");
        var result = await modelService.Post(model);

    }

}

The modelService only returns a single record, which id does successfully. I am able to retrieve the input value using richTextEditRef.GetHtmlAsync() however I cannot find a way to use the richTextEditRef.SetHtmlAsync(company.About) method to initially set the value of the RichTextEdit.

I have tried calling it after calling the modelService as seen in the commented code, but this is inconstant as it is often excecuted prior to the service returning the record. I have also attempted overriding the OnAfterRenderAsync method but I am not sure I am doing that correctly.

Too much wasted time on this, please help!?

score 5 · Answer 1 · answered Jun 10 '21 at 10:58

Well after much trial and error I got this to work. Hopefully someone else will benefit from this:

in the editor component add:

<Editor>@((MarkupString)model.Property2)</Editor>

in the @code add a new property:

public string newRichTextValue { get; set; }

in the OnContentChanged() method set the new property:

newRichTextValue = await richTextEditRef.GetHtmlAsync();

in the Submit() method set the model.Property2 value to the new property:

model.Property2 = newRichTextValue;

score 2 · Answer 2 · answered May 03 '22 at 21:09

If the data is stored as an HTML string. You can render the html inside the <Editor/> tag with the help of (MarkupString) See MarkupString

<Editor>@((MarkupString)HtmlString)</Editor>

This will initialize the plugin with data correctly formatted in the editor.

how do I bind a blazorise RichTextEdit component to a model property

2 Answers2