2

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

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

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

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

编辑器示例代码

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

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

4

3 回答 3

1

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>

方法 -- getEditorData() 在 OnValidSubmit() 之前被触发

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

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

如果有人试图这样做，希望这会有所帮助..

于 2020-04-10T06:59:39.847 回答
0

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

方法

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

要使用这些方法，您需要它的参考

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

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

于 2020-04-09T17:43:13.027 回答
0

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

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

  1. 在提交时获得价值

     <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
         }
     }
于 2020-11-22T20:01:41.180 回答