如何为JS中动态添加的textarea文本框集成CKEditor？

嘿，这个问题我太熟了！你已经用jQuery把textarea动态插入页面了，要给它加上CKEditor核心就是等这个新textarea真的出现在DOM里之后，再调用CKEditor的初始化方法——毕竟CKEditor得找到对应的DOM节点才能干活嘛。给你几个靠谱的实现方式，按需选：

方法1：append后直接用name属性初始化 #

你已经给textarea设了name="contentBody"，append完直接指定这个name就行，简单粗暴：

// 先完成动态添加操作
$(container).append('<label for="input">'+ '<h3> <i class="fas fa-arrow-right"></i> Add Body</h3>'+ '</label><textarea name="contentBody" rows="8" cols="80" placeholder="Go Ahead..."></textarea>' );

// 立刻初始化CKEditor
CKEDITOR.replace('contentBody');

⚠️ 小提醒：如果页面里有多个同名的textarea，这个方法可能会绑定错对象，要是怕冲突，试试下面更精准的方式。

方法2：精准定位刚添加的textarea（推荐） #

先把textarea存成变量，再append到页面，最后用原生DOM节点初始化，完全不用担心冲突：

// 先创建textarea的jQuery对象
const $newTextarea = $('<textarea name="contentBody" rows="8" cols="80" placeholder="Go Ahead..."></textarea>');

// 先加label，再加textarea
$(container)
  .append('<label for="input">'+ '<h3> <i class="fas fa-arrow-right"></i> Add Body</h3>'+ '</label>')
  .append($newTextarea);

// 用原生DOM节点初始化CKEditor
CKEDITOR.replace($newTextarea[0]);

这个方法的好处是，不管页面里有多少个textarea，都只会给你刚创建的那个绑定编辑器，稳得一批。

方法3：应对DOM更新延迟的容错方案 #

有时候如果你的container本身也是动态生成的，可能会出现append完但DOM还没更新的情况，这时候可以用个小技巧确保元素已存在：

$(container).append('<label for="input">'+ '<h3> <i class="fas fa-arrow-right"></i> Add Body</h3>'+ '</label><textarea name="contentBody" rows="8" cols="80" placeholder="Go Ahead..."></textarea>' );

// 用setTimeout让浏览器先完成DOM渲染再初始化
setTimeout(() => {
  CKEDITOR.replace('contentBody');
}, 0);

或者如果是在页面整体加载过程中操作，也可以把初始化代码放在$(document).ready()里，确保页面DOM都准备就绪了再执行。

最后补个小技巧：如果之后需要更新编辑器内容或者重新绑定，记得先销毁旧的实例再初始化，避免重复绑定出bug：

// 销毁指定实例
if (CKEDITOR.instances.contentBody) {
  CKEDITOR.instances.contentBody.destroy();
}
// 重新初始化
CKEDITOR.replace('contentBody');

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