无法在 Razor 页面中使用 WYSIWYG 编辑器发布 TextArea 值

Question

我正在开发 .NET Core 3.1 Razor Pages 应用程序。我的应用程序中的 Razor 页面之一使用 AJAX 发布 TextArea 的内容。然而，当我使用 CKEditor 5 https://ckeditor.com/ckeditor-5/< 时，这按预期工作/a> 并将 TextArea 变成所见即所得编辑器，我无法再在编辑器中发布值。

请注意，CKEditor 按预期加载，并且当我在 Google Chrome 中使用开发人员工具时没有错误。

PageModel

[BindProperty]
public InputModel Input { get; set; }

public PartialViewResult OnPostMyTestPartial()
{
  //Some logic then return data for partial
}

public class InputModel
{
    public int Id { get; set; }
    public string Narrative { get; set; }           
}

CSHTML

<form>
  <!-- Other html -->
  <textarea asp-for="Input.Narrative"></textarea>  
  <button class="btn btn-primary" id="load">Update</button>            
</form>

JQuery

$(document).ready(function () {

  $('#load').on('click', function (evt) {
    evt.preventDefault();

       $.post("/MyPage/Index?handler=MyTestPartial", $('form').serialize(), function (data) {
        $("#myPartial").html(data);
       });
  });

  ClassicEditor
    .create(document.querySelector('#Input_Narrative'), {
        toolbar: ['heading', '|', 'bold', 'italic', 'link']
    })
    .then(editor => {
        window.editor = editor;
    })
    .catch(err => {
        console.error(err.stack);
    });
});

当我注释掉 JQuery 文件中的 ClassicEditor 代码以使 TextArea 纯粹保留为 TextArea 时，我可以看到开发人员工具并在 Visual Studio 中调试该值已成功发布：

但是，当我使用CKEditor 并尝试发布数据，数据不发布。

有人可以帮忙吗？

谢谢。

Answer 1

您需要手动将编辑器的内容传输到表单控件：

$('#load').on('click', function (evt) {
    evt.preventDefault();
    $('#Input_Narrative').val(CKEDITOR.instances['Input_Narrative'].getData());
       $.post("/MyPage/Index?handler=MyTestPartial", $('form').serialize(), function (data) {
        $("#myPartial").html(data);
       });
  });

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/ saving-data.html#manually-retriving-the-data