如何将 blazorise RichTextEdit 组件绑定到模型属性答案

【问题标题】：how do I bind a blazorise RichTextEdit component to a model property如何将 blazorise RichTextEdit 组件绑定到模型属性
【发布时间】：2022-05-04 05:09:13
【问题描述】：

我正在尝试在表单中使用 blazorise RichTextEdit 组件。我似乎无法将初始值设置为提供的模型属性的值。

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

    }

}

modelService 只返回一条记录，id 成功。我可以使用richTextEditRef.GetHtmlAsync() 检索输入值，但是我找不到使用 richTextEditRef.SetHtmlAsync(company.About) 方法来初始设置 RichTextEdit 的值。

我曾尝试在调用 modelService 后调用它，如注释代码中所示，但这不是恒定的，因为它通常在服务返回记录之前执行。我也尝试过覆盖 OnAfterRenderAsync 方法，但我不确定我是否正确。

在这上面浪费了太多时间，请帮忙！？

【问题讨论】：

标签： blazor-webassembly blazorise

【解决方案1】：

经过多次试验和错误，我得到了这个工作。希望其他人能从中受益：

在编辑器组件中添加：

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

在@code中添加一个新属性：

public string newRichTextValue { get; set; }

在OnContentChanged() 方法中设置新属性：

newRichTextValue = await richTextEditRef.GetHtmlAsync();

在Submit() 方法中将model.Property2 值设置为新属性：

model.Property2 = newRichTextValue;

【讨论】：

【解决方案2】：

如果数据存储为 HTML 字符串。您可以在在(MarkupString)See MarkupString的帮助下<Editor/>标签

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

这将使用编辑器中正确格式化的数据初始化插件。

【讨论】：