何时加载CKEDITOR脚本并准备使用？

Question

有没有更好的方法来确定何时加载CKEDITOR并且某些功能可用？我已经包含了我们当前正在使用的代码,但它依赖于setTimeouts和计数器来检查CKEDITOR是否准备就绪.有时代码到达第一个if语句并且CKEDITOR可用(非空)但事件处理没有加载,因此CKEDITOR.on不是函数.我本质上是在寻找一种依赖于事件处理的解决方案(可能是CKEDITOR在准备就绪时会触发的事件？)而不是setTimeouts.

TL; DR:CKEDITOR.on尚未作为函数提供

只有某些页面需要CKEDITOR才能根据页面内容按需加载.

版本:使用CKEDITOR 4.8

  Main.Script.getScript(javascript('external/ckeditor/ckeditor.js'), function() {
    var count = 0,
        init = function() {
          count++;
          if (CKEDITOR && CKEDITOR.on) {
            /*
              According to https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#event-loaded,
              the "loaded" event is fired when editor components (configuration, languages, and plugins)
              are fully loaded and initialized.
             */
            CKEDITOR.on('loaded', function() {
              // Trigger _ckeditorReady event for custom event handling (CKEDITOR.on('instanceReady'), etc.)
              $(window).trigger('_ckeditorReady');
            });
          } else {
            if (count < 50) {
              $(script).ready(function() {
                setTimeout(init, 20);
              });
            }
          }
        };
    $(script).ready(function() {
      setTimeout(init, 20);
    });
  });

Answer 1

有一个instanceReady事件，当编辑器加载并准备好交互时会触发该事件。如何使用它的示例：

CKEDITOR.replace( 'editor', {
  on: {
    'instanceReady': function( evt ) {
      var editor = evt.editor;
      console.log( 'Hello world' );
      console.log( JSON.stringify( CKEDITOR.tools.objectKeys( editor.plugins ) ) );
    }
  }
} );

实现同一事件的另一种方法：

var myeditor = CKEDITOR.replace( 'editor' );

myeditor.on( 'instanceReady', function( evt ) {
  var editor = evt.editor;
      console.log( 'Hello world' );
      console.log( JSON.stringify( CKEDITOR.tools.objectKeys( editor.plugins ) ) );
} );

来源： https: //codepen.io/msamsel/pen/LQBLxw? editors=1111