CKEditor 5 中 window.editorInstance.destroy() 的问题

Question

我在应用程序中销毁和重新创建 CKEditor 5 实例时遇到问题。以下是我想要实现的目标和面临的问题的总结：

我需要在打开模式时销毁现有的 CKEditor 5 实例，然后在该模式中创建一个新实例。

 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();
});

问题：

1. 调用 window.editorInstance.destroy() 时，出现错误： TypeError: Cannot read properties of undefined (reading 'attributes')。这表明销毁编辑器实例存在问题。
2. 直接操作编辑器的 UI 元素（例如 window.editorInstance.ui.view.element.remove()）似乎不起作用

Answer 1

在调用 destroy 方法之前确保 editorInstance 存在，并且编辑器在模态中正确初始化。

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();
});