如何通过javascript更改ckeditor值

Question

我的textarea是：

<textarea class="content" name="content" id="content" rows="10" cols="80"></textarea>

并将其初始化为：

<script>
    $(document).ready(function(){

        ///CKeditor
        CKEDITOR.replace( 'content', {
            height: 320,
        } );

    });
</script>

现在我在数组中获取数据，然后根据它更改不同元素的值。我得到的数组是：

[{"id":"5","subject_Id":"1","topic_id":"1","question_type_id":"4","exam_id":"1","difficulty_id":"1","year_id":"1","essay":"","right_marks":"2","negative_marks":"3","question":"question 2","options":"Ans CC~Ans BB~Ans AA~","correct_answer":"Ans BB~"}]

[{"id":"6","subject_Id":"1","topic_id":"1","question_type_id":"4","exam_id":"1","difficulty_id":"1","year_id":"1","essay":"","right_marks":"2","negative_marks":"3","question":"question 1","options":"<img alt=\"\" src=\"\/corePhp\/examinationsystem\/assets\/ckeditor\/kcfinder\/upload\/images\/profile-icon-9(1).png\" style=\"height:512px; width:512px\" \/>~Ans BB~Ans AA~","correct_answer":"Ans BB~"}]

[{"id":"18","subject_Id":"1","topic_id":"1","question_type_id":"1","exam_id":"1","difficulty_id":"1","year_id":"2","essay":"Essay 5","right_marks":"2","negative_marks":"3","question":"Brass gets discoloured in air because of the presence of which of the following gases in air?","options":"Oxygen~Hydrogen sulphide~Carbon dioxide~Nitrogen","correct_answer":"\"Hydrogen sulphide\""}]

然后在我的JavaScript中

    <script type="text/javascript">
    function dbDataQuestion(quesId) {
        var xmlhttp;

        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)
            {
                var convert=JSON.parse(xmlhttp.responseText);
                //console.log(convert[0].subject_Id);
                document.getElementById("selectSubject").value=convert[0].subject_Id;
                document.getElementById("selectTopic").value=convert[0].topic_id;
                document.getElementById("selectQuestionType").value=convert[0].question_type_id;
                document.getElementById("selectExam").value=convert[0].exam_id;
                document.getElementById("selectYear").value=convert[0].year_id;
                document.getElementById("selectDiffLvl").value=convert[0].difficulty_id;
                document.getElementById("txtRightMarks").value=convert[0].right_marks;
                document.getElementById("txtNegMarks").value=convert[0].negative_marks;
                console.log(convert[0].question_type_id);
                console.log(convert[0].question);

                CKEDITOR.on("instanceReady", function(event)
                {
                    //CKEDITOR.instances.content.insertHtml(convert[0].question);
                    CKEDITOR.instances.content.focus();
                    CKEDITOR.instances.content.setData(convert[0].question);

                });

                if(convert[0].essay){
                    document.getElementById("txtEssayName").value=convert[0].essay;
                    document.getElementById("radioEssayYes").checked = true;
                }
                else{
                    document.getElementById("txtEssayName").value=convert[0].essay;
                    document.getElementById("radioEssayNo").checked = true;
                }
            }
        }

        xmlhttp.open("POST","process/questions/quesDetails.php?quesId="+quesId, false);
        xmlhttp.send();
    }
</script>

你可以看到我正在安慰console.log(convert[0].question);我正在获得正确的数据，但当我写CKEDITOR.instances.content.setData(convert[0].question);它不更新ck编辑器的价值。

实际上函数“dbDataQuestion（quesId）”在页面加载时被调用一次，它的工作正常CKEditor显示question 2，你可以看到它在第一个数组中，之后我有一个按钮，我就是获取下一个数组等等。单击此按钮数组将显示在控制台中以及其他元素正在更改其值但CKEditor显示相同的旧值question 1而不是question 2安慰console.log(convert[0].question);我得到“问题2”这是正确的。

注意：function dbDataQuestion(quesId)是我从上面提到的数组的位置和函数的xmlhttp.readyState === 4 && xmlhttp.status === 200我正在改变包含ck编辑器的元素的值。它曾在页面加载时调用，然后在按钮点击时调用它：

<button type="button" class="btn btn-xs btn-success" onclick="fetchQuestionDetails('next')">Next</button>

我在页面底部调用我的所有脚本。提前致谢。

更新：我注意到按下按钮时调用函数没有触发instanceReady事件。我改变了我的代码来检查

console.log(convert[0].question);
CKEDITOR.on("instanceReady", function(event)
{
    console.log(convert[0].question);
    console.log("sss");
    CKEDITOR.instances.content.focus();
    CKEDITOR.instances.content.setData(convert[0].question);
});

只有console.log(convert[0].question);被触发，没有其他console声明。我究竟做错了什么？

Answer 1

首先非常感谢@Muhammad Omer Aslam做出的回应，这么快。我没有尝试过你的答案，但我会尝试并评论，如果它解决了问题，但我找到了一种方法使其工作，我删除了instanceReady事件并写道

setTimeout(function(){
    CKEDITOR.instances.content.setData(convert[0].question);
}, 1000);

它的工作正常。但再次感谢@Muhammad Omer Aslam

Answer 2

通过在ajax响应部分中移动初始化，尝试以下方式。

$(document).ready(function () {
    dbDataQuestion(quesId);
});

你的功能看起来像这样。

function dbDataQuestion(quesId) {
    var xmlhttp;

    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) {
            var convert = JSON.parse(xmlhttp.responseText);
            //console.log(convert[0].subject_Id);
            document.getElementById("selectSubject").value = convert[0].subject_Id;
            document.getElementById("selectTopic").value = convert[0].topic_id;
            document.getElementById("selectQuestionType").value = convert[0].question_type_id;
            document.getElementById("selectExam").value = convert[0].exam_id;
            document.getElementById("selectYear").value = convert[0].year_id;
            document.getElementById("selectDiffLvl").value = convert[0].difficulty_id;
            document.getElementById("txtRightMarks").value = convert[0].right_marks;
            document.getElementById("txtNegMarks").value = convert[0].negative_marks;
            console.log(convert[0].question_type_id);
            console.log(convert[0].question);
            ///CKeditor
            CKEDITOR.replace('content', {
                height: 320,
            });

            CKEDITOR.on("instanceReady", function (event) {
                //CKEDITOR.instances.content.insertHtml(convert[0].question);
                CKEDITOR.instances.content.focus();
                CKEDITOR.instances.content.setData(convert[0].question);

            });

            if (convert[0].essay) {
                document.getElementById("txtEssayName").value = convert[0].essay;
                document.getElementById("radioEssayYes").checked = true;
            } else {
                document.getElementById("txtEssayName").value = convert[0].essay;
                document.getElementById("radioEssayNo").checked = true;
            }
        }
    }

    xmlhttp.open("POST", "process/questions/quesDetails.php?quesId=" + quesId, false);
    xmlhttp.send();
}