动态增删含CKEditor的元素后，无法获取新CKEditor实例的问题

这个坑我之前踩过！核心问题出在删除元素时没有正确销毁CKEditor实例，导致CKEDITOR.instances里残留了旧的实例引用——当你再次添加相同ID的元素时，CKEditor会默认认为这个实例已经存在，不会重新初始化新的编辑器，自然就拿不到新实例了。

下面是具体的解决方案，分两步走：

1. 删除元素前必须销毁对应的CKEditor实例 #

在移除DOM元素之前，一定要先调用CKEditor的销毁方法，彻底清理旧实例的引用。比如：

// 假设你要删除的编辑器元素ID是'editor-xxx'
const targetEditorId = 'editor-xxx';

// 先判断实例是否存在，避免报错
if (CKEDITOR.instances[targetEditorId]) {
  // 销毁实例，第二个参数传true会同时移除编辑器生成的DOM元素
  CKEDITOR.instances[targetEditorId].destroy(true);
  // 手动从instances对象中删除引用（可选，但更彻底）
  delete CKEDITOR.instances[targetEditorId];
}

// 最后再删除页面上的容器元素
document.getElementById(targetEditorId)?.remove();

2. 添加新元素时使用唯一ID #

很多人会犯的错误是重复使用同一个ID（比如固定用'editor'），就算销毁了旧实例，也容易出现意外问题。建议用动态生成的唯一ID，比如递增计数器或者时间戳：

// 初始化一个计数器
let editorSeq = 0;

function addNewEditor() {
  editorSeq++;
  // 生成唯一ID
  const newEditorId = `dynamic-editor-${editorSeq}`;
  
  // 创建新的编辑器容器
  const editorWrapper = document.createElement('div');
  editorWrapper.innerHTML = `<textarea id="${newEditorId}"></textarea>`;
  document.getElementById('editor-container').appendChild(editorWrapper);
  
  // 初始化CKEditor
  CKEDITOR.replace(newEditorId);
  
  // 现在就能正常获取新实例了
  console.log(CKEDITOR.instances[newEditorId]);
}

验证方法 #

每次添加或删除后，可以在控制台打印console.log(CKEDITOR.instances)，查看当前的实例列表，确认旧实例被清理、新实例已正确注册。

按这个流程操作，就能彻底解决“删除后再添加无法获取新CKEditor实例”的问题啦！

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