Blazor 文本編輯器無法在表單上綁定值（創建/編輯）

Question

我正在使用來自以下源的 Blazor 文本編輯器。

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

我成功地將它與我的創建和編輯表單集成，但無法將值綁定到它。 因此，我的數據注釋驗證失敗。

內部 blazor 正在使用 Quill 編輯器，我不是在尋找 javascript 選項。

編輯器示例代碼

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

誰能幫幫我。 如何在沒有 javascript 的情況下綁定值或更正方法。

Answer 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() 上的最終實體中，我收到所有字段以及編輯器數據。

如果有人試圖這樣做，希望這會有所幫助..

Answer 2

顯然你不能綁定一個值，但你應該使用提供的方法

方法

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

在你的 class 的一些代碼中你可以做

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
}

您可以調用這些方法並在其他方法中使用引用，這只是一個示例。

Answer 3

我是這樣做的： 1- 綁定加載值：

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

2. 在提交時獲得價值

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