2
votes

L'éditeur de texte Blazor ne peut pas lier la valeur sur le formulaire (créer / modifier)

J'utilise Blazor Text Editor à partir de la source ci-dessous.

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

Je l'ai intégré avec succès à mon formulaire de création et d'édition, mais je n'ai pas pu y lier Value. Pour cette raison, ma validation d'annotation de données échoue.

En interne, blazor utilise Quill Editor, je ne recherche pas d'option javascript.

Exemple de code de l'éditeur

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

Quelqu'un pourrait-il m'aider s'il vous plaît. Comment lier une valeur ou une approche correcte sans javascript.

blazor data-annotations rich-text-editor blazored

0 commentaires

3 Réponses :

0
votes

Apparemment, vous ne pouvez pas y lier une valeur, mais vous devez utiliser les méthodes fournies

Méthodes

GetText - Obtient le contenu de l'éditeur sous forme de texte.
GetHTML - Obtient le contenu de l'éditeur au format HTML.
GetContent - Obtient le contenu de l'éditeur au format natif Quill JSON Delta.
LoadContent (json) - Permet au contenu de l'éditeur d'être défini par programmation.
LoadHTMLContent (string) - Permet au contenu de l'éditeur d'être défini par programmation.
InsertImage (string) - Insère une image au point courant dans l'éditeur.

Pour utiliser ces méthodes, vous avez besoin d'une référence

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
}

Et dans du code dans votre classe, vous pouvez faire

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

Vous pouvez appeler ces méthodes et utiliser la référence dans d'autres méthodes, ce n'est qu'un exemple sur la façon de le faire.

0 commentaires

1
votes

Vencovsky - grâce à votre réponse rapide, j'étais déjà au courant de ces méthodes, mais j'étais curieux de savoir si quelqu'un avait essayé une option différente.

Voici ce que j'ai fait.

FORM - Ceci est un formulaire courant pour créer et modifier. OnValidSubmit appellera la méthode Create / Edit respective.

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

METHODE - getEditorData () est déclenché avant OnValidSubmit ()

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

Donc, dans ma dernière entité sur OnValidSubmit (), je reçois tous les champs avec les données de l'éditeur.

J'espère que cette aide si quelqu'un essaie de le faire.

0 commentaires

0
votes

voici comment j'ai fait ceci: 1- pour lier la valeur au chargement:

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

pour obtenir de la valeur lors de la soumission

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

...

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

0 commentaires