CKeditor instance is null or undefined?

Question

Hi all i have an CKeditor in my screen ckeditor is displaying but when i try to get the instance of the editor i have the value null or undefined how can i get the ckeditor instance can any one help me here

function editor() {
    //i have null here
    for (name in CKEDITOR.instances) {
        CKEDITOR.instances[name].destroy()
    }

    var editor = CKEDITOR.instances.editor1;//i have null here
    editor.on('key', function () {
        var data = editor.getData();        
    });
}

$(document).ready(function () {    
    var editorShort = CKEDITOR.editor.replace('popup_editor1');
    editor();
});

Answer 1

It could be that the instances variable is simply undefined at that time. Depending on what you really want to do with the editor, I suggest that you do the on key bindings and other such things inside instanceReady, which is a CKEditor event.

$(document).ready(function () {  
    // You can define it before replacing the editor
    CKEDITOR.on('instanceReady', function(e){
        // Do your bindings / other actions here
        // To access the editor that this event has fired on:
        const editor = e.editor;
    });

   // replace editor
    const editorVar = CKEDITOR.editor.replace('popup_editor1');
});

See the documentation at http://docs.ckeditor.com/#!/api/CKEDITOR-event-instanceReady

---

Or if you don't use jQuery

document.addEventListener("DOMContentLoaded", () => {
    // You can define it before replacing the editor
    CKEDITOR.on('instanceReady', function(e){
        // Do your bindings / other actions here
        // To access the editor that this event has fired on:
        const editor = e.editor;
    });

   // replace editor
    const editorVar = CKEDITOR.editor.replace('popup_editor1');
});

Answer 2

Nenotlep answer was fine ,I am just adding on something to help those like me.

<script type="text/javascript">
$(document).ready(function () { 
CKEDITOR.on('instanceReady', function(evt){
  console.log("instance is ready");
  for (var instance in CKEDITOR.instances)
            CKEDITOR.instances[instance].updateElement(); 

// now if you do console.log(instance) it will give editor or id_your_editor ,,use this value

  var slug= $('#slugfield').val()
  var e=CKEDITOR.instances.id_Your_Message
  e.on('keyup', function(e){
  var content = CKEDITOR.instances[instance].getData()
  $.ajax({
      type: "POST",
      url: "{% url 'edit-update' %}",
      data: {'slug':newslug,'code':content},
      success: function (data) {
        console.log("instance is");
        console.log(instance);
      },
      error: function(data) {
          console.log("error");
      }
  });

});
});
});
</script>