How to retrieve the CKEDITOR.status "ready"?

Question

In my script, I wanted to wait for the CKEDITOR to be in state ready before I let my own instructions go their way. So I consulted the CKEDITOR API and wrote the following condition:

if(CKEDITOR.status == "ready"){
 //execute my code when ready
}

However, the status never ever changes to from loaded to status. Apparently I didn even see any other state.

More task specific, I wanted to catch the moment when CKEDITOR has completed modifying the inline replacing of contenteditable="true". That's when I want to go ahead with my JS code.

Any clues?

I'm not sure that the CKEDITOR.status or the "loaded" event work in CKEditor 4 because AFAIK the "delayed loading" system is another part of CKEditor that has been lost with the introduction of the 4.x series. And even if they worked, they aren't related to the initialization of the editors in the page, you must use listeners for each instanceReady as shown in the provided answers. — AlfonsoML, Aug 27 '13 at 15:18

oleq · Accepted Answer · 2015-08-18T14:41:54.987

68

If you want to execute your code when the API is fully loaded, use CKEDITOR.loaded event:

CKEDITOR.on( 'loaded', function( evt ) {
    // your stuff here
} );

If you want to execute your code when any new instance is ready, use CKEDITOR.instanceReady event:

CKEDITOR.on( 'instanceReady', function( evt ) {
    // your stuff here
} );

If you want to execute your code when a particular instance is ready, then use CKEDITOR.editor.instanceReady event:

CKEDITOR.replace( 'editor', {
    on: {
        instanceReady: function( evt ) {
            // your stuff here
        }
    }
} );

edited Aug 18 '15 at 14:41

answered Aug 27 '13 at 12:04

oleq

15,697
1
38
65

5

hint: the editor for which the event trigger is inside `evt.editor`, the original element inside `evt.editor.element.$` – Markus Jul 22 '16 at 14:26
@oleq can you add how could this be done in the ckeditor5 document version? – always-a-learner Jun 02 '20 at 11:48
1

@always-a-learner In CKEditor 5 when you call the `ClassicEditor.create( ... ).then( editor => { console.log() } )` promise chain, the editor instance is ready in the `then()` block. [Learn more](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html#creating-an-editor). – oleq Jun 03 '20 at 08:48

score 9 · Answer 2 · answered Aug 27 '13 at 09:05

9

there's no ready status in CKEDITOR, you can use loaded like:

if ( CKEDITOR.status == 'loaded' ) {
    // The API can now be fully used.
    doSomething();
}

or use instanceReady, like:

CKEDITOR.on('instanceReady', function(evt){ 
   //ready
  //do something
});

answered Aug 27 '13 at 09:05

Sudhir Bastakoti

99,167
15
158
162

yes, there is only these below, in the sequential order. However, I wanted to catch the moment when CKEDITOR has completed modifying the inline replacing of contenteditable="true". Any clue. unloaded: the API is not yet loaded. basic_loaded: the basic API features are available. basic_ready: the basic API is ready to load the full core code. loaded: the API can be fully used. – feder Aug 27 '13 at 09:10
1

@feder in that case you could use 'insanceReady' – Sudhir Bastakoti Aug 27 '13 at 09:13

score 2 · Answer 3 · answered Aug 27 '13 at 09:20

As @Sudhir pointed out, there is a slight difference between the direct attribute value and the instanceReady method.

Use the event listener if you demand to be notified when CKEDITOR has not only completed its loading process, but also has completed the entire after-processing. In particular the HTML replacement and injection.

How to retrieve the CKEDITOR.status "ready"?

3 Answers3

Linked