BLAZOR中post上的CKEditor文本值丢失

我在Blazor应用程序中有一个Textarea控件，它是一个CKEditor 5 WYSIWYG编辑器

<div class="form-group">
    <label for="image">Content</label>
    <textarea id="editor" class="form-control" @bind="@PostObject.Content" />
    <ValidationMessage For="@(() => PostObject.Content)" />
</div>

---

For me使用函数CKEDITOR.editor.getData。

您的代码可以更改为以下内容

<EditForm Model="@postObject" OnValidSubmit="SaveObject">
    <div class="form-group">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <InputTextArea id="editor" @bind-Value="@PostObject.Content" Class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
</EditForm>

@code {

    PostObject postObject= new PostObject();
   string contentFromEditor = string.Empty;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
          await jsRuntime.InvokeAsync<string>("RTF", "editor");
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task SaveObject()
    {
        contentFromEditor = await JSRuntime.InvokeAsync<string>("CKEDITOR.instances.editor.getData");
    }

}

拯救
@代码{
PostObject PostObject=新的PostObject（）；
string contentFromEditor=string.Empty；
AfterRenderAsync（bool firstRender）上受保护的重写异步任务
{
if（firstRender）
等待jsRuntime.InvokeAsync（“RTF”、“编辑器”）；
等待base.OnAfterRenderAsync（firstRender）；
}
私有异步任务SaveObject（）
{
contentFromEditor=await JSRuntime.InvokeAsync（“CKEDITOR.instances.editor.getData”）；
}
}

阅读本文，了解如何正确集成

function RTF(editorId) {
    ClassicEditor.create(document.querySelector('#' + editorId));
}

<EditForm Model="@postObject" OnValidSubmit="SaveObject">
    <div class="form-group">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <InputTextArea id="editor" @bind-Value="@PostObject.Content" Class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
</EditForm>

@code {

    PostObject postObject= new PostObject();
   string contentFromEditor = string.Empty;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
          await jsRuntime.InvokeAsync<string>("RTF", "editor");
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task SaveObject()
    {
        contentFromEditor = await JSRuntime.InvokeAsync<string>("CKEDITOR.instances.editor.getData");
    }

}