CKEditor New Instance always unloaded

Question

I'm using CKEditor in my Angular app and have a view that reloads my CKEditor instance every time users access a new model.

I'm using the following JS to initialize the editor:

var initEditor = function() {
  $('.js-editor-wrap').html("<textarea id='editor'></textarea>");

  var editor = CKEDITOR.replace('editor', {});

  editor.on('loaded', function() {
    console.log('editor loaded');
  });

  editor.on('instanceReady', function() {
    console.log('instance ready')
  });
}

And the following to destroy the editor:

var destroyEditor = function() {
  if (CKEDITOR.instances['editor']) {
    CKEDITOR.instances['editor'].destroy(true);
    $('#editor').off().remove();
  }
}

The first editor initialization works just as expected, but subsequent initializations create an editor instance with a status of "unloaded" that never triggers the "loaded" or "instanceReady" events. I'm not seeing any errors in the console.

Any ideas what might be causing this?

This is definitely a similar issue to the following, but different enough that I think it warrants its own question: CKEditor instance already exists

Answer 1

After a LOT more digging and thanks to the jsfiddle from Jey Dwork, I figured out where the issue is here. My CKEditor config file adds a couple of plugins that referenced lang files that were improperly named. For some reason, when these plugins were included together they caused the editor to not fully load during a second initialization.

Removing the lang files and reference to them in the plugin definitions resolved the issue. It's too bad that there wasn't some error that was triggered around this. All's well that ends well though.