CKEditor 5中window.editorInstance.destroy()调用异常问题

问题描述 #

在打开Bootstrap模态框时，尝试销毁原有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();
});

遇到两个问题：

• 调用window.editorInstance.destroy()时抛出错误：TypeError: Cannot read properties of undefined (reading 'attributes')，销毁实例过程异常；
• 直接操作编辑器UI元素（如window.editorInstance.ui.view.element.remove()）无效果。

解决方案 #

1. 修复销毁实例的异步冲突问题 #

CKEditor 5的destroy()方法是异步操作，同步调用后立即创建新实例会导致DOM元素状态混乱，引发报错。需等待销毁完成后再初始化新实例：

async function initializeEditor() {
    // 处理已有实例的销毁
    if (window.editorInstance) {
        try {
            await window.editorInstance.destroy();
            // 销毁后清空全局引用，避免后续判断出错
            window.editorInstance = null;
        } catch (destroyError) {
            console.error('CKEditor销毁失败: ', destroyError);
            window.editorInstance = null;
        }
    }

    const editorElement = document.querySelector('#email_signature_address');
    if (!editorElement) return;

    // 初始化新实例
    try {
        const editor = await ClassicEditor.create(editorElement, {
            toolbar: ['link'],
            // 修正配置项：CKEditor 5不需要嵌套editorConfig，直接写顶层配置
            emailMode: true
        });
        window.editorInstance = editor;
    } catch (initError) {
        console.error('CKEditor初始化错误: ', initError);
    }
}

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

关键修正点：

• 使用async/await等待destroy()异步操作完成，避免DOM资源冲突；
• 销毁后强制清空全局引用window.editorInstance；
• 移除错误的editorConfig嵌套配置，CKEditor 5的配置参数直接写在创建方法的第二个对象参数中。

2. 强制清理UI元素的兜底方案 #

如果销毁方法执行异常，可手动恢复原始DOM元素并清理CKEditor生成的UI结构：

if (window.editorInstance) {
    try {
        await window.editorInstance.destroy();
        window.editorInstance = null;
    } catch (e) {
        const editorElement = document.querySelector('#email_signature_address');
        if (editorElement) {
            // 恢复原始的textarea或元素
            const originalElement = window.editorInstance.sourceElement;
            if (originalElement) {
                editorElement.replaceWith(originalElement);
            }
            // 移除CKEditor生成的UI容器
            const editorUIElement = window.editorInstance.ui.view.element;
            if (editorUIElement && editorUIElement.parentNode) {
                editorUIElement.parentNode.removeChild(editorUIElement);
            }
        }
        window.editorInstance = null;
    }
}

该方法通过恢复原始DOM状态，强制清理CKEditor生成的所有UI元素，确保模态框重新打开时DOM处于干净状态。

3. 额外优化：模态框关闭时清理实例 #

为避免内存泄漏，建议在模态框关闭时也执行实例销毁操作：

$('#createPersonModal').on('hidden.bs.modal', async function() {
    if (window.editorInstance) {
        await window.editorInstance.destroy();
        window.editorInstance = null;
    }
});

内容的提问来源于stack exchange，提问作者Arpine Harutyunyan