Ajax 调用后 CKEditor 不工作

Posted 2023-02-19

【中文标题】Ajax 调用后 CKEditor 不工作

【英文标题】：CKEditor not working after Ajax call

【发布时间】：2012-11-15 03:31:30

【问题描述】：

我使用 CKEditor 作为所见即所得的编辑器。我的页面上有一些通过 Ajax 调用加载的表单元素。当我填写包括所见即所得编辑器在内的所有数据，然后点击保存按钮时，什么都没有保存。提交也是通过 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]'];

【参考方案1】：

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

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

如果仍有问题，请分享您用于创建编辑器的代码。也许您的文本区域与编辑器实例关联不正确。

【讨论】：

对不起，我实际上有完全相同的代码。最终我尝试在那里硬编码元素名称，看看它是否有所作为。但是在这里发布我的问题时忘记放回我的原始代码。所以这两种方法对我来说都失败了。

您很可能在错误的时刻尝试调用它，或者编辑器本身有问题。您可以发布CKEDITOR.instances['element[1][content]']; 的检查内容吗？

这会返回一个非常大的对象。我确实在其中看到了 updateElement() 函数，但由于某些奇怪的原因调用该函数会返回 undefined。我现在使用getData() 从CKEditor 获取内容，然后手动将其设置回相应的文本区域。这似乎是一个很好的解决方法。

【参考方案2】：

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

例如

在视图中的脚本部分：

<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();
 ?>

试试看。

【参考方案3】：

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

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