Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Issues with window.editorInstance.destroy() in CKEditor 5

I’m encountering issues with destroying and recreating CKEditor 5 instances in my application. Here’s a summary of what I’m trying to achieve and the problems I’m facing:

I need to destroy an existing CKEditor 5 instance when opening a modal and then create a new instance within that modal.

 function initializeEditor() {
    if (window.editorInstance) {
        window.editorInstance.destroy();
    }
    ClassicEditor
        .create(document.querySelector('#email_signature_address'), {
            toolbar: ['link'],
            editorConfig: {
                emailMode: true
            }
        })
        .then(editor => {
            window.editorInstance = editor;
        })
        .catch(error => {
            console.error('CKEditor initialization error: ', error);
        });
}

$('#createPersonModal').on('shown.bs.modal', function() {
   initializeEditor();
});

Problem:

  1. When calling window.editorInstance.destroy(), I get an error: TypeError: Cannot read properties of undefined (reading ‘attributes’). This indicates an issue with destroying the editor instance.
  2. Direct manipulation of the editor’s UI elements (e.g., window.editorInstance.ui.view.element.remove()) does not seem to work
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    $('#createPersonModal').off('shown.bs.modal').on('shown.bs.modal', function() {
                $(".selectpicker").selectpicker();

                initializeEditor();
            });

    In my case help this solution. I add off('shown.bs.modal') before


  2. 0

    Ensure that the editorInstance exists before calling the destroy method and the editor is correctly initialized in the modal.

    function initializeEditor() {
    if (window.editorInstance) {
        window.editorInstance.destroy()
            .then(() => {
                console.log('Editor destroyed successfully.');
                createEditor();
            })
            .catch(error => {
                console.error('Error destroying the editor: ', error);
                createEditor();
            });
    } else {
        createEditor();
    }
}

function createEditor() {
    ClassicEditor
        .create(document.querySelector('#email_signature_address'), {
            toolbar: ['link'],
            emailMode: true
        })
        .then(editor => {
            window.editorInstance = editor;
        })
        .catch(error => {
            console.error('CKEditor initialization error: ', error);
        });
}

$('#createPersonModal').on('shown.bs.modal', function() {
   initializeEditor();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search