Blazor Text Editor not able to bind value on form (create/edit)

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.

score 1 · Answer 1 · answered Apr 10 '20 at 06:59

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

score 0 · Answer 2 · answered Apr 09 '20 at 17:43

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.

score 0 · Answer 3 · answered Nov 22 '20 at 20:01

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

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

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

Blazor Text Editor not able to bind value on form (create/edit)

3 Answers3