Question

我在JQuery UI对话框中创建CKEditor的多个实例时遇到问题。该对话框通过AJAX加载远程表单，因此目标是能够关闭并重新打开对话框并拥有编辑器的新实例。使用默认选项时，重新打开对话框时会出现错误，指出已存在具有该名称的编辑器。所以我尝试了几种破坏编辑器实例的方法，它们都导致了同样的问题。重新加载编辑器时，文本区域显示为null，按钮不起作用。

目前我正在使用这种破坏实例的方法：

var instance = CKEDITOR.instances['test'];
if (instance) { CKEDITOR.remove(CKEDITOR.instances['test']); }

我用几个可供下载的简单html文件重新创建了这个问题here。

编辑：我刚尝试使用两个远程文件，文本区域名称不同，我遇到了同样的问题。当一个对话框打开然后关闭时，另一个对话框在打开时会有一个“null”CKEditor。

另外，显然这只是Safari中的一个问题。

Answer 1

这就是我所做的：

var CKeditors = {};
function loadEditors() {
    var $editors = $("textarea.ckeditor");
    if ($editors.length) {
        $editors.each(function() {
            var editorID = $(this).attr("id");
            if(CKeditors[editorID]){
                CKeditors[editorID].destroy();
                CKeditors[editorID] = null;
            }

            var dst = editorID+'-element';
            var html = '';
            if( $(this).val() ){
                html = $(this).val();
            }
            CKeditors[editorID] = CKEDITOR.appendTo(dst, {}, html);
        });
        $("textarea.ckeditor").hide();
    }
}

function updateCKEditors() {
    for(x in CKeditors){
        $("#"+x).val(CKeditors[x].getData());
    }
}

然后在ajax成功后我做了

loadEditors()

并在表单提交之前（例如使用ajax）：

updateCKEditors()

你需要jQuery来实现这一点。这适用于zend_forms，但经过一些修正也应该以正常形式工作。与'dst'一起玩。

Answer 2

有点老话题，但我有类似的问题。

我上面使用了Activ的解决方案，效果很好！ CKEDITOR.appendTo对我来说没有用，但是对loadEditors函数进行了下一次细微修改：

function loadEditors() {
    var $editors = $("textarea.ckeditor");
    if ($editors.length) {
        $editors.each(function() {
            var editorID = $(this).attr("id");
            if(CKeditors[editorID]){
                CKeditors[editorID].destroy();
                CKeditors[editorID] = null;
            }

            var dst = editorID+'-element';
            CKeditors[editorID] = CKEDITOR.replace(dst, {});
        });
    }
}

Answer 3

我的所作所为：

var instance = CKEDITOR.instances['test'];
instance.destroy();
instance = null;

CKEditor的多个实例（在Safari中）

3 个答案: