通过XMLHttpRequest加载内容后CKEditor无法替换textarea问题求助

这个问题我之前也碰到过，核心原因是CKEditor初始化的时机不对：当你在yourTicket.php里直接写CKEDITOR.replace('answer')时，这段脚本执行的时机早于textarea被插入到主页面DOM的时机，自然找不到目标元素，也就无法完成替换。而主页面初始的textarea能正常工作，是因为页面加载时它已经存在于DOM中，CKEditor能顺利找到并替换它。

解决方案步骤： #

1. 移除yourTicket.php中的CKEditor初始化脚本
   删掉你之前加的<script type="text/javascript">CKEDITOR.replace('answer');</script>，因为我们要在AJAX回调完成后统一处理初始化。

2. 修改AJAX回调函数，在DOM更新后初始化CKEditor
   在你的ticketDetails函数里，当AJAX返回内容并插入到yourTicket元素后，立即调用CKEditor的replace方法。同时为了避免重复初始化报错，建议先检查是否已有该实例，若有则销毁后再重新初始化。

修改后的JavaScript代码如下：

function ticketDetails(id){
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("yourTicket").innerHTML=xmlhttp.responseText;
            
            // 关键：在DOM更新后初始化CKEditor
            // 先检查是否已有实例，避免重复初始化报错
            if (CKEDITOR.instances.answer) {
                CKEDITOR.instances.answer.destroy();
            }
            // 替换textarea为CKEditor
            CKEDITOR.replace('answer');
        }
    }
    xmlhttp.open("POST","./support/yourTicket.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send('ticketid='+id);
}

原理说明： #

AJAX请求完成后，xmlhttp.responseText的内容被插入到页面的yourTicket元素中，此时textarea已经存在于DOM树里，这时调用CKEDITOR.replace('answer')就能准确找到目标元素，完成编辑器的替换。

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