CODEWITHSUNDEEP
javascriptckeditor
friedkiwi
friedkiwi

Reputation: 2198

How to determine if CKEditor is loaded?

How do I find out if CKEditor is loaded? I've looked through the API docs, but could only find the loaded event. I want to check if CKEditor is loaded, because if I load it a second time, my textareas disapears.

Upvotes: 22

Views: 25169

Answers (7)

Fab
Fab

Reputation: 14813

If instance is not ready, the text set would be discarded

On initialization of the CkEditor (version 4 here), you should never set any data before the editor is ready to handle it.

// Initialize this._editor with replace

if (this._editor.status !== "ready") {
    this._editor.on("instanceReady",
        event => {
            event.editor.setData(data);
        });
} else {
    this._editor.setData(data);
}

Upvotes: 1

devendra singh
devendra singh

Reputation: 219

//creating instance of ck-editor
var yourInstance = CKEDITOR.instances.yourContainer;
//check instance of your ck-editor 
if(yourInstance){
      //destroy instance
      yourInstance .destroy(true); 
}
// create instance again
CKEDITOR.replace( 'yourContainer' );

Upvotes: 0

Wise
Wise

Reputation: 7

I know this is a very old post, but in my research it kept coming up. I am dynamically loading the CKEditor through jQuery. I didn't want to load it multiple times since things start happening, as you found out.

Simple solution:

if (!window.CKEDITOR) {
    // (not loaded yet, your code to load it)
}

Upvotes: 0

Jonathan Parker
Jonathan Parker

Reputation: 1

Hope this helps someone.

I also load a page snippet with CKEDITOR functionality via AJAX and as such I have experienced many of the problems outlined in this question. This is my solution:

function setCk(id){
if(window.CKEDITOR){
    var _instId = CKEDITOR.instances[id];
    if(_instId == undefined){
        CKEDITOR.inline(id);
    }else{
        CKEDITOR.instances[id].destroy();
        CKEDITOR.inline(id);
    }
}

}

On each AJAX response for this snippet I inject a script element into the head with a call to setCk(textareaId). The trick being to destroy any previous CKEDITOR instances for the target ID & re-initialise CKEDITOR after each AJAX snippet load.

Upvotes: 0

Alex
Alex

Reputation: 3464

var waitCKEDITOR = setInterval(function() {
    if (window.CKEDITOR) {
       clearInterval(waitCKEDITOR);
       //CKEDITOR.replace(...);
    }
}, 100/*milli*/);

Upvotes: 4

Kees C. Bakker
Kees C. Bakker

Reputation: 33431

The loaded event didn't work for me. instanceReady worked:

CKEDitor_loaded = false;

CKEDITOR.on('instanceReady', function(){ CKEditor_loaded = true; });

Upvotes: 27

Pekka
Pekka

Reputation: 449783

I've looked through the API docs, but could only find the loaded event.

I don't know whether there exists a specific property for this - there might! - but you could use the loaded event to set a global flag. It's not really nice but would do the job. 

// At the top of the script
CKEDitor_loaded = false;

// then later
CKEDITOR.on('loaded', function(){ CKEditor_loaded = true; });

Instead of a global variable, you could also consider setting something inside CKEDITOR:

CKEDITOR.flag_loaded = true;

This would be a bit cleaner.

Upvotes: 2

Related Questions