无法在 Razor Pages 中使用 WYSIWYG 编辑器 Post TextArea 值

Question

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

请注意，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 中的开发者工具和调试看到该值是 Post编辑成功：

但是，当我使用 CKEditor 将 TextArea 制作成编辑器并尝试 Post 数据时，数据没有发布。

有人可以帮忙吗？

谢谢。

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-retrieving-the-data

无法在 Razor Pages 中使用 WYSIWYG 编辑器 Post TextArea 值

Can't Post TextArea value using WYSIWYG Editor in Razor Pages

ajax

textarea

ckeditor

asp.net-core

razor-pages