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

Question

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

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

我已成功将其与创建和编辑表单集成在一起，但是无法将Value绑定到它。因此，我的数据注释验证失败。

内部内部使用Quill Editor，我不是在寻找javascript选项。

编辑器的样本代码

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

任何人都可以帮助我。如何在没有JavaScript的情况下绑定值或正确的方法。

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

您可以调用这些方法，并在其他方法中使用Referece，这只是如何执行此操作的示例。

Answer 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-在OnValidSubmit（）之前触发getEditorData（）

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

所以在OnValidSubmit（）的最终实体中，我收到了所有字段以及编辑器数据。

希望有人帮助时可以使用此帮助。