instance of CKeditor already exists

Question

I have found a few similar posts on this on Stack overflow but there are none with an answer that is working.

I have a few tabs on a page, depending on that li they click on they will see a specific tab. In one of the tabs there is a CKeditor which is initiated on the click of the li. When they user clicks off that specific tab onto another one, and then returns there is this error:

Uncaught The editor instance "employDesc" is already attached to the provided element.

Here is the JS:

    $('.addVacancy').click( function() {
        if(CKEDITOR.instances.employDesc)  {
            alert('instance exists');
            var editor = CKEDITOR.instances[employDesc];
            if (editor) { 
                editor.destroy(true); 
            } 
            alert('distroyed');
        }   
        CKEDITOR.replace('employDesc');
    });

Both of the alerts appear but then it breaks as the error comes on in the console. Can anyone help with this?

Thanks

Bennir

why do you wanna bind CKEDITOR on click event of the li? why not bind it on document load ? – Marinate

I tried that, but when I clicked through the tabs it didnt work. I thought maybe they were dynamically loaded – Bennir

Can you do a working fiddle of this ? – Marinate

Answer 1

You're trying to use a variable named employDesc, you should use CKEDITOR.instances["employDesc"]; or just

$('.addVacancy').click( function() {
    var editor = CKEDITOR.instances.employDesc;
    if (editor) {
        alert('instance exists');
        editor.destroy(true); 
        alert('destroyed');
    }   
    CKEDITOR.replace('employDesc');
});

It's the same that you were trying to do.

Lifeline

Answer 2

if (CKEDITOR.instances['tresc']) {
    CKEDITOR.remove(CKEDITOR.instances['tresc']);
} else{
    CKEDITOR.replace( 'tresc');
}

Basting

Answer 3

I am using something like this code to check if the editor is not defined before, create a new instance. I think this is better from those I have tried.

var editor = CKEDITOR.instances.['employDesc'];
    if (!editor){
        CKEDITOR.replace('employDesc');
    }

Sg

Answer 4

i couldn't find any solutions posted online that worked. but this worked for me:

var notes = 'div-name';
$('#'+notes).html('');
CKEDITOR.appendTo( notes );

instead of CKEDITOR.replace, I used CKEDITOR.appendTo

hope this saves some poor soul some precious time.

Heterogenous

Answer 5

<textarea class="form-control" name="visited_places">
    <?php if(isset($data)){ echo $data["visited_places"]; }?>
</textarea>
<?php echo display_ckeditor("visited_places"); ?>


<textarea class="form-control" name="visited_places">
    <?php if(!empty($data)){ echo $data["visited_places"]; }?>
</textarea>
<?php echo display_ckeditor("visited_places"); ?>

I just replace isset with !empty data array to sort this error.

Propellant

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Kenwood