jquery - 在ajax内容中加载ckeditor

Question

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

我一直在寻找解决方案，但找不到任何对我有用的解决方案。

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

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

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

火狐 说：

$(".ckeditor").ckeditor 不是函数

IE 说：

对象不支持属性或方法“ckeditor”

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

Answer 1

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

比$('.ckeditor').ckeditor();会工作。

Answer 2

你可以使用命令：

CKEDITOR.replace( 'editor1' );

但有一个区别 - editor1 是 textarea 的 id 而不是类。

Answer 3

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

Answer 4

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

我发现了这个并在这些元素中将 contenteditable 设置为 true 之后添加了它：

CKEDITOR.inlineAll();

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

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

Answer 5

$('.ckeditor').ckeditor(); 我通过调用我的 ajax 的成功属性来尝试接受的答案 。然而，这给出了一个错误。

然而 StanleyD 的回答确实有效。

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

Answer 6

ajax之后可以使用done()and方法then()

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