我们的只用在文件里面引用一个CKEditor的js文件--CKEditor目录下的ckeditor.js文件, 该文件会完成后续的所有的CKEidtor依赖的js文件的加载.

所依赖的js文件加载顺序如下

以样式为分界点, 以上的部分为CKEditor所依赖的核心文件.他们全部放在CORE文件夹中.由ckeditor.js引发加载,具体由core/loader.js完成整个加载逻辑

//ckeditor.js中的代码片段 script.src = CKEDITOR.getUrl('core/loader.js');document.body.appendChild(script); //core/loader.js中的代码片段 CKEDITOR.loader = ( function() {.....})();

样式以下的部分就是配置文件, 皮肤, 和插件的加载.是在页面加载完成事件触发以后开始加载的,具体是谁引发的加载不是太清楚,请高手指点,所以我们在CKEDITOR.replace()方法里面写的配置文件要优先于config.js里面的配置.

 

核心部分的加载也就是创建CKEditor对象的过程.

CKEditor对象时一个单例对象, 详情如下

window.CKEDITOR || (window.CKEDITOR = (function () { ..创建CKEditor对象的过程.. })())

但这个不是说我们在页面上只能创建一个CKEditor编辑器,实际上我们可以这样

页面中所有的CKEditor编辑器实例都由CKEditor对象统一管理.我们还可以这样调用这些实例

CKEDITOR.instances['editor01'].name;CKEDITOR.instances['editor02'].name;

 

而我们对CKEditor的扩展主要是在config.js 这个文件, 也就是在加载完核心文件后加载的第一个js文件.

这种扩展配置的方式是直接修改的config.js文件,  不是太符合对象的封装原则, 不过修改起来倒是很方便.

config.js文件是在初始化CKEDITOR.editor对象的时候被加载的,所以我们的配置也就一起被加载了.

推荐的做法是使用CKDitor.replace方法,扩展和配置CKEditor,这里面的配置优先级别也高于config.js里面的配置

CKEDITOR.replace( 'editor1',    {        extraPlugins = 'myplugin1,myplugin2',//扩展自己的插件        //下面是CKEditor各种属性配置.        toolbar :        [            ['Styles', 'Format'],            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']        ]    });