CKEDITOR is not defined when emptying textarea jquery

i have my text area initalized in a form.after submiting the data in the form i want to empty the text area which has ck editor plugin.my issue here is when i try to empty it using this code i get an error in the console log Uncaught ReferenceError: CKEDITOR is not defined

here is my ajax code where am trying to empty the data in the textarea.

    $.ajax({
            url: 'create-book',
            method: 'POST',
            processData: false,
            contentType: false,
            data: formdata,
            success: function(response) {
               CKEDITOR.instances['bookDesc'].setData('')
            }
      });

already i have intitalized the editor this way when loading the page

    $(document).ready(function() {
        let theEditor;
        ClassicEditor.create( document.querySelector( '#bookDesc' ),
        {
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote','|',
                    'undo', 'redo',]
        })
        .then(editor => {
            theEditor = editor;
        })

        .catch( error => {
            console.error( error );
        });
    });

in the layout file i have placed the links this way

   <script src="{{ asset('assets/jquery/jquery-3.7.1.min.js') }}"></script>
   <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
    <script src="{{ asset('assets/admin_js/script.js') }}"></script>```

i have tried a couple of solutions but none is working.which part might i be missing the point here

shariff

2 years ago

Level 50

Make sure the links are added before initialization.

<script src="{{ asset('assets/jquery/jquery-3.7.1.min.js') }}"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
<script src="{{ asset('assets/admin_js/script.js') }}"></script>

$(document).ready(function() {
        let theEditor;
        ClassicEditor.create( document.querySelector( '#bookDesc' ),
        {
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote','|',
                    'undo', 'redo',]
        })
        .then(editor => {
            theEditor = editor;
        })

        .catch( error => {
            console.error( error );
        });
    });

1 like

bestmomo

2 years ago

Level 52

Looks like the CKEDITOR is not defined. It seems you're mixing up CKEditor 4 and CKEditor 5. CKEDITOR.instances is a method from CKEditor 4, but you're using CKEditor 5 in your code (as indicated by the ClassicEditor.create() method). Try it:

$(document).ready(function(
) {
    ClassicEditor.create(document.querySelector('#bookDesc'), {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote','|', 'undo', 'redo',]
    })
    .then(editor => {
        // Use the editor
$.ajax({
            url: 'create-book',
            method: 'POST',
            processData: false,
            contentType: false,
            data: formdata,
            success: function(response) {
                editor.setData(''); //setData is a method on editor instance
}
        });
    })
    .catch( error => {
        console.error( error );
    });
});

1 like

stephen waweru

2 years ago

Level 2

i solved this by first declaring the theEditor variable above the $(document).ready(function() { }) function,then in the ajax function i call the emptying function like this

theEditor.setData( '' );

Please or to participate in this conversation.