Question

我正在使用CKEditor将我的textareas改为wysiwyg。一切正常，除非我通过Ajax调用加载内容。然后我的CKEditor没有加载。

我已经找到了解决方案，但找不到任何对我有用的方法。

我的Ajax调用基本上是这样的：

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

如您所见，我尝试使用函数 ckeditor（）以编程方式加载CKEditor。但这给了我以下错误：

FireFox说：

$（“。ckeditor”）。ckeditor不是函数

IE说：

对象不支持属性或方法'ckeditor'

当通过Ajax调用加载内容时，是否还有其他方法可以按类名加载CKEditor？

Answer 1

首先，你必须加载jquery适配器＆＃39; /path/to/ckeditor/adapters/jquery.js'

比$('.ckeditor').ckeditor();更有用。

Answer 2

你可以使用命令：

CKEDITOR.replace( 'editor1' );

但有一点不同 - editor1是textarea的id而不是class。

Answer 3

有一种解决方法。像往常一样加载你的ckeditor，但保持隐藏。当通过ajax加载内容时，填充编辑器div并通过jquery显示。

Answer 4

我通过电话尝试了接受的答案 $('.ckeditor').ckeditor(); 在我的阿贾克斯的成功中。但这给了一个错误。

然而，斯坦利的答案确实奏效了。

在使用ajax附加内容后，尝试在ajax的success属性中添加以下代码： CKEDITOR.replace('textareaId');

Answer 5

有一个类似的问题。在AJAX +向页面附加元素（具有可编辑属性的元素）之后，我需要使用CKEDITOR的多个区域。花了很多时间无济于事，然后......

我发现了这一点，并在这些元素中设置contenteditable为true后添加了它：

CKEDITOR.inlineAll();

在AJAX +附加到页面之后处理初始化我所有的CKEDITOR区域。

https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR-method-inline

Answer 6

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

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

在ajax内容中加载ckeditor

6 个答案: