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

Question

I am using Blazor Text Editor from source below.

Source - https://github.com/Blazored/TextEditor

I successfully integrated it with my create and edit form, however not able to bind-Value to it. Because of this my Data Annotation Validation is failing.

Internally blazor is using Quill Editor, I am not looking for javascript option.

Sample Code of editor

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

Could anyone please help me. How to bind-Value or correct approach without javascript.

Answer 1

Vencovsky - thanks of you prompt response, I was already aware of these methods however was curious to know if anybody had tried different option.

Below is what I did..

FORM -- This is common form for create & edit. OnValidSubmit will call respective Create/Edit method.

<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() gets fired before OnValidSubmit()

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

So in my final Entity on OnValidSubmit() I receive all fields along with editor data..

Hope this help if anyone is trying to do so..

Answer 2

Apparently you can't bind a value to it, but you should use the provided methods

Methods

• GetText - Gets the content of the editor as Text.
• GetHTML - Gets the content of the editor as HTML.
• GetContent - Gets the content of the editor in the native Quill JSON Delta format.
• LoadContent (json) - Allows the content of the editor to be programmatically set.
• LoadHTMLContent (string) - Allows the content of the editor to be programmatically set.
• InsertImage (string) - Inserts an image at the current point in the editor.

To use these methods you need a reference of it

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

And in some code in your class you can do

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
}

You can call these methods and use the referece in other methods, this is just an example on how to do it.

Answer 3

here is how I did this: 1- to bind the value on load:

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

2. to get value on submit

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