Multiple instances of CKEditor (in Safari) [duplicate]

2
votes

I'm having a problem creating multiple instances of a CKEditor in a JQuery UI dialog. The dialog loads a remote form via AJAX, so the goal is to be able to close and reopen the dialog and have a new instance of the editor. With the default options, when reopening the dialog it gives an error saying that an editor with that name already exists. So I have tried several methods of destroying the editor instance and they all result in the same problem. When the editor is reloaded, the text area says null and the buttons don't function.

Currently I'm using this method of destroying the instance:

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

I recreated the issue with a couple of simple html files available for download here.

EDIT: I just tried using two remote files with a text area that has a different name and I have the same problem. When one dialog is opened and then closed, the other dialog has a "null" CKEditor when it is opened.

Also, apparently this is only a problem in Safari.

3
javascriptjquerysafarickeditor

3 Answers

1
votes

this is what i've done:

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

then after ajax succes im doing

loadEditors()

and before form submitting (for example using ajax):

updateCKEditors()

you need jQuery to have that working. this is for zend_forms, but after few corrections should work in normal forms too. play with 'dst' to do that.

1
votes

Bit of an old topic, but i had a similar problem.

I used activ's solution above, which worked out great! CKEDITOR.appendTo did't work out for me, but with the next slight modification to the loadEditors function it did:

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, {});
        });
    }
}
0
votes

what I do:

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