Blazor 文本编辑器无法在表单上绑定值（创建/编辑）答案

【问题标题】：Blazor Text Editor not able to bind value on form (create/edit)Blazor 文本编辑器无法在表单上绑定值（创建/编辑）
【发布时间】：2020-07-22 09:40:48
【问题描述】：

我正在使用来自以下来源的 Blazor 文本编辑器。

来源 - https://github.com/Blazored/TextEditor

我成功地将它与我的创建和编辑表单集成，但无法将值绑定到它。因此，我的数据注释验证失败。

内部 blazor 正在使用 Quill 编辑器，我不是在寻找 javascript 选项。

编辑器示例代码

<BlazoredTextEditor  @ref="@QuillNative" Placeholder="Enter non HTML format like centering...">
      <ToolbarContent>Some editor stuff here</ToolbarContent>
<BlazoredTextEditor

谁能帮帮我。如何在没有 javascript 的情况下绑定值或更正方法。

【问题讨论】：

标签： data-annotations blazor rich-text-editor blazored

【解决方案1】：

显然你不能给它绑定一个值，但你应该使用提供的方法

方法

GetText - 将编辑器的内容作为文本获取。
GetHTML - 以 HTML 格式获取编辑器的内容。
GetContent - 以原生 Quill JSON Delta 格式获取编辑器的内容。
LoadContent (json) - 允许以编程方式设置编辑器的内容。
LoadHTMLContent（字符串）- 允许以编程方式设置编辑器的内容。
InsertImage（字符串）- 在编辑器的当前点插入图像。

要使用这些方法，您需要一个参考

@* Getting the BlazoredTextEditor reference*@
<BlazoredTextEditor @ref="@BlazoredTextEditorRef">
    @* rest of the code*@
</BlazoredTextEditor>

在你的类中的一些代码中你可以这样做

void LoadData(){
    //var html = BlazoredTextEditor.LoadHTML(SomeDataToLoad)
    BlazoredTextEditor.LoadText(SomeDataToLoad)
}

void ValidateData(){
    //var html = BlazoredTextEditor.GetHTML()
    var text = BlazoredTextEditor.GetText()
    // do something to validate text
}

您可以调用这些方法并在其他方法中使用引用，这只是一个示例。

【讨论】：

【解决方案2】：

Vencovsky - 感谢您的及时回复，我已经知道这些方法，但是很想知道是否有人尝试过不同的选择。

下面是我做的..

FORM -- 这是创建和编辑的常用表单。 OnValidSubmit 将调用相应的 Create/Edit 方法。

<EditForm Model="Entity" class="contact-form" OnValidSubmit="OnValidSubmit">
//My form fields here
//Commented the validation from that particular field
@*<ValidationMessage For="@(() =>Entity.field)" />*@

<div class="col-sm-1">
    <button type="submit" @onclick="***getEditorData***" class="btn" 
    style="border:2px solid #555555;"><span>Save</span></button>
 </div>
</EditForm>

METHOD -- getEditorData() 在 OnValidSubmit() 之前被触发

public async void getEditorData()
{
  Enity.field = await this.QuillNative.GetHTML();
}

因此，在 OnValidSubmit() 上的最终实体中，我收到了所有字段以及编辑器数据..

如果有人尝试这样做，希望对您有所帮助..

【讨论】：

【解决方案3】：

我是这样做的： 1-绑定加载值：

 <BlazoredTextEditor @ref="@QuillHtml">
        <EditorContent>
            @((MarkupString)infoBlock.Description)
        </EditorContent>
    </BlazoredTextEditor>

在提交时获得价值

 <EditForm Model="infoBlock" OnValidSubmit="LocalOnValidSubmit">

...

  @code {
 ....       
         [Parameter] public EventCallback OnValidSubmit { get; set; }
         BlazoredTextEditor QuillHtml = new BlazoredTextEditor();

         private async Task LocalOnValidSubmit()
         {
                   infoBlock.Description = await this.QuillHtml.GetHTML();
                   await OnValidSubmit.InvokeAsync(this);//to call event handler passed by parent after the HTML prepared for main bound class
         }
     }

【讨论】：