模态框传递数据至CKEditor5时重复实例化问题求助

问题根源 #

每次触发AJAX请求都会调用ClassicEditor.create()创建新编辑器实例，旧实例未销毁，导致DOM元素被多个实例绑定，数据更新失效，同时产生冗余实例占用资源。

具体修复步骤 #

1. 全局存储编辑器实例引用 #

在函数外部定义变量，用来保存已创建的CKEditor实例，避免重复创建：

let placeEditor = null; // 全局存储编辑器实例

2. 优化AJAX回调逻辑 #

创建编辑器前先检查实例是否存在：存在则直接更新数据，不存在再创建新实例并保存引用，同时修正原代码中的选择器错误：

function getDetailPlace(event, element) {
    event.preventDefault();
    var url = $(element).attr('href');

    $.ajax({
        url: url,
        type: 'GET',
        success: function(response) {
            var detailData = response.vlplace[0];  
            // 修正选择器：原textarea的id是editCKeditor，而非describe_view_place
            $('#editCKeditor').val(detailData.describe_place);
            
            const editorElement = document.querySelector('#editCKeditor');
            if (placeEditor) {
                // 实例已存在，直接更新数据
                placeEditor.setData(detailData.describe_place);
            } else {
                // 实例不存在，创建新实例并保存引用
                ClassicEditor
                    .create(editorElement)
                    .then(editor => {
                        placeEditor = editor;
                        placeEditor.setData(detailData.describe_place);
                    })
                    .catch(error => {
                        console.error(error);
                    });
            }
            $('#detailPlaceModal').modal('show');
        },
        error: function() {
            alert('获取数据失败');
        }
    });
}

3. （可选）模态框关闭时销毁实例 #

若需每次关闭模态框都清理实例、释放内存，可监听模态框关闭事件：

$('#detailPlaceModal').on('hidden.bs.modal', function() {
    if (placeEditor) {
        placeEditor.destroy(); // 销毁实例
        placeEditor = null; // 重置引用
        $('#editCKeditor').val(''); // 清空textarea避免残留旧数据
    }
});

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