javascript - 无法将动态加载的 Teaxtarea 转换为 ckeditor

Question

单击链接后调用此 get_content 函数。

function get_content(n)
{
    var hr=new XMLHttpRequest();
    var url="./updatecontent.php";
    var vars="id="+n;
    hr.open("POST",url,true);
    hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    hr.onreadystatechange=function()
    {
        if(hr.readyState==4 && hr.status==200)
        {
            var return_data=hr.responseText;
            document.getElementById("content").innerHTML=return_data;
        }
    }
    hr.send(vars);
    document.getElementById("content").innerHTML='<img src="./img/loading.gif">';
}

<div id="content"></div>

以下是响应数据

<div id="text-editor" style="width:100%;">
<form action="" method="post">
<textarea class="ckeditor" name="editor1" id="txt1"></textarea>
<input type="submit" name="update" value="Update">
</form>
</div>
<script  src="./ckeditor/ckeditor.js"></script>

响应数据成功添加到 div id="content"

ckeditor的相对链接是正确的。但是textarea没有转换成CKeditor。错误在哪里？请帮忙。

Answer 1

在这种情况下，您需要CKEDITOR.replace('editor1')在内容更改后调用。

所以在你的情况下

function get_content(n)
{
    var hr=new XMLHttpRequest();
    var url="./updatecontent.php";
    var vars="id="+n;
    hr.open("POST",url,true);
    hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    hr.onreadystatechange=function()
    {
        if(hr.readyState==4 && hr.status==200)
        {
            var return_data=hr.responseText;
            document.getElementById("content").innerHTML=return_data;
            CKEDITOR.replace('editor1'); // <-- add this line
        }
    }
    hr.send(vars);
    document.getElementById("content").innerHTML='<img src="./img/loading.gif">';
}