I'm having problem getting data from ckeditor textarea

Question

I'm having problem getting the textarea(ckeditor) value. This is the script line :

<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>

This is my textarea code :

 @Html.TextAreaFor(model => model.FullNews, new { @class = "form-control", @id = "Parag" })

This is my scripts section code :

 ClassicEditor
        .create(document.querySelector('#Parag'))
        .catch(error => {
            console.error(error);
        });



    function loadData() {
        debugger;
        var head = $("#Header").val();
        var para = CKEDITOR.instances.Parag.getData();
        document.getElementById("Para").innerHTML = para;
        document.getElementById("Head").innerHTML = head;
        readURL(document.getElementById("newsImage"));
        $("#previwe_before_publish").modal("show");
    }

When i debug it in browser, i get the error "Uncaught ReferenceError: CKEDITOR is not defined" in the line :

var para = CKEDITOR.instances.Parag.getData();

I searched over the internet but couldn't find the solution for it. Can anybody help me ?

Answer 1

CKEDITOR.instances simply is not defined in CKEditor 5. According to this section of the CKEditor 5 FAQ:

What happened to the global window.CKEDITOR? How to list all instances of the editor?

By default, CKEditor 5 has no global registry of editor instances. But if necessary, such feature can be easily implemented as explained in the Stack Overflow answer.

However, it is defined in CKEditor 4. Refer to the StackOverflow answer referenced in the CKEditor 5 documentation, or shift to CKEditor 4 for your code to function.