Ajax调用后CKEditor无法正常工作

Question

我正在使用CKEditor作为一个所见即所得的编辑器。我的页面上有一些表单元素，它们通过Ajax调用加载。当我填写所有数据，包括wysiwyg编辑器，然后点击保存按钮没有保存任何内容。提交也是通过Ajax调用完成的。

没有任何东西可以保存，因为CKEditor没有正确更新原始的textarea。在提交之前我找到了一个答案，说要做以下事情：

for(var instanceName in CKEDITOR.instances) {
    console.log(instanceName);
    CKEDITOR.instances['element[1][content]'].updateElement();
}

在我提交表单之前每次都会触发此操作。但是这段代码仍然没有用CKEditor的内容更新真正的textarea ...

任何人都知道如何解决这个问题？

我正在使用最新的CKEditor（3.6.5，于2012年10月10日发布）。

编辑

刚刚通过Firefox的控制台注意到，当我运行以下命令时，updateElement()未定义：

CKEDITOR.instances['element[1][content]'].updateElement();

但是当我运行它时，它确实返回一个对象：

CKEDITOR.instances['element[1][content]'];

Answer 1

你的第一个代码很糟糕。为什么在同一对象上调用方法时使用循环？这个更好：

for(var instanceName in CKEDITOR.instances) {
    CKEDITOR.instances[ instanceName ].updateElement();
}

如果仍有问题，请分享您用于创建编辑器的代码。也许您的textareas与编辑器实例错误地关联。

Answer 2

有替代解决方案，您可以在ckeditor中添加数据而无需编辑实例值。

EG

在脚本部分视图中：

<script>
$(function(){
    $("#editBasic").click(function(){
        url = "<?=$this->webroot?>derivedItineraries/getDetail/<?=$derived_itinerary_id?>";
        var div = '#basic_detail';
        var data = {id: 1};
        callajax(url, data, $(div));
        return false;
    });
});
</script>

在Ajax调用函数中：

function callajax2(url, data, divname){
$.ajax({
        type : 'POST',
        url : url,
        dataType : 'text',
        data: data,

        success: function(data) {
            divname.text('');
            divname.append(data);
            divname.show(500);
            if (data.error === true)
                 divname.show(500);
        }
});
return false;

}

在控制器页面中：

public function getDetail($id = null) {
    $this->request->onlyAllow('ajax');
       $this->viewClass = 'Json';

       $this->loadModel('Destination');

        $this->DerivedItinerary->recursive = -1;
        $derivedItineraries = $this->DerivedItinerary->findById($id);

        $destination_covered = $this->destination_covered($id);
        $destinations = $this->Destination->find('list');

        $arrData=array(
            'itinerary'=>$derivedItineraries,
            'destination_covered' => $destination_covered,
            'destinations' => $destinations
        );
        $this->set('data', $arrData);
        $this->render('derived_basic', 'ajax'); 
}

View中应该有一个名为“ControllerName”/json/derived_basic.ctp的文件

“derived_itineraries / json / derived_basic.ctp”中的文件内容：

<?php
 echo $this->Html->script('/ckeditor/ckeditor', false);
  echo $this->Form->create();
  echo $this->Form->input('inclusion', array('type'=>'textarea', 'class'=>'ckeditor', 'required'=>'true', 'div'=>'required', 'style'=>'width:200px;', 'value'=> "Test data"))."      </td></tr>";
  echo $this->Form->end();
 ?>

试试吧。

Answer 3

你可以在ajax之后使用done()和then()方法

$.ajax({
    type: "POST",
    url: url
}).done(function(data){
     $('#content').html(data);
}).then(function(){
     //create ckeditor
});