在ajax内容中加载ckeditor

Question

我将使用CKEditor将我的文本区域转换为所见即所得编辑器。所有工作都很正常，除非我通过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？

- w00

---

如果错误信息是“'.ckeditor'不是一个函数”，那么这意味着 ckeditor 的 js 文件没有在之前加载。你是否使用了 $(document).ready 或者将你的 js 代码片段放置在脚本的最后而没有使用 document-ready 回调函数？ - Istiaque Ahmed

Answer 1

首先你需要加载jquery适配器 '/path/to/ckeditor/adapters/jquery.js'

然后调用$('.ckeditor').ckeditor(); 就可以使用了。

- Guest

Answer 2

您可以使用以下命令：

CKEDITOR.replace( 'editor1' );

但有一个不同之处- editor1是文本区域的id而不是类。

- StanleyD

---

运行得非常好！ - Keutelvocht

如果我们不想让ID相同，就不能为多个CK编辑器设置它们。 - M Amir Shahzad

Answer 3

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

- Raab

Answer 4

我尝试了已经被接受的答案，通过在我的ajax成功属性中调用$('.ckeditor').ckeditor();。 然而，这会导致错误。

StanleyD的答案确实起作用了。

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

- Niels Vanhorenbeeck

Answer 5

我曾经遇到过类似的问题。在使用AJAX并向页面添加具有可编辑属性的元素后，我需要多个区域使用CKEDITOR。花费了大量时间却毫无结果，然后...

我发现了这个方法，在将那些元素的contenteditable设置为true之后添加它：

CKEDITOR.inlineAll();

处理了在 AJAX 后初始化所有 CKEDITOR 区域并附加到页面。

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

- DavidA26

Answer 6

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

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

- Yashar Gorgani