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

Question

I'm developing a .NET Core 3.1 Razor Pages Application. One of the Razor Pages within my app Posts the contents of a TextArea using AJAX. This works as expected, however, when I use CKEditor 5 https://ckeditor.com/ckeditor-5/ and turn the TextArea into a WYSIWYG Editor, I can no longer Post the values within the editor.

Please note, the CKEditor loads as expected and there are no errors when I use Developer Tools within 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);
    });
});

When I comment out the ClassicEditor code in my JQuery file so that the TextArea remains purely as a TextArea, I can see through the Developer Tools and debugging in Visual Studio that the value is Posted successfully:

However, when I make the TextArea into an editor using the CKEditor and attempt to Post data, the data is not posted.

Can someone please help?

Thanks.

Answer 1

You need to manually transfer the content of the editor to the form control:

$('#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