ckeditor的运转流程

本文简要的介绍了ckeditor的运转流程，包括核心库的加载，插件的加载，ck主ui的生成，及dialog的加载过程。

 

Ckeditor包括生产模式和开发模式，生产模式将所有的核心库js压缩成同一个文件，开发模式则分别动态加载各个单独js，插件的加载则方式相同，本文介绍以开发模式为准。

 

首先加载ckeditor_source.js，在其中初始化CKEDITOR对象，将其定 义为全局对象。然后加载core/loader.js，在其中初始化CKEDITOR.loader，然后加载core/ckeditor.js,在 ckeditor.js中会通过CKEDITOR.loader.load方法加载core/_bootstrap.js，这个方法会首先加载要加载脚本 的依赖脚本，在ckeditor_basic.js中对window注册onload事件，事件触发时调用CKEDITOR.replaceAll方法， 此方法最终会调用editor_basic.js的CKEDITOR.editor.replace方法，此方法中会调用new CKEDITOR.editor生成edirot实例，实例化过程中会调用editor.js中的 CKEDITOR.editor.prototype._init方法，对edirot进行初始化，并初始化config，加载skin css，最后调用loadLang，此方法会调用CKEDITOR.lang.load，并将含有loadPlugins方法的回调函数注册在 lang.js脚本的onreadystatechange事件。此后依次加载核心脚本。

脚本加载完成后会触发onreadystatechange事件，并调用回调函数，其中 lang.js对应的事件会回调editor.js的loadLang，loadLang中会调用loadPlugins，加载插件（所有 plugin.js，注意相应的dialog.js是懒加载的）。loadPlugins会调用loadTheme，theme.js的 onreadystatechange会回调editorTheme.build(editor)，用以生成ckeditor的展示外观，在不同的插件中 注册了themeSpace事件，包扩四个部分：top（toolbar），contents(iframe编辑区) ，elementPath(显示元素排列) ，bottom（底部）。

      在toolbar区是每个按钮，按钮的onclice事件会调用CKEDITOR.ui.button（plugins/button /plugin.js）的click方法,此方法会调command.js的CKEDITOR.command .execCommand，接着调用在plugin.js中为此按钮注册的command （以dialogCommand 为例 ）的exec方法，此方法最后会调用dialog/plugin.js 的editor.openDialog( this.dialogName )，如果是第一次加载，会调用CKEDITOR.scriptLoader.load,加载dialog.js,返回dialog对象并注册到 CKEDITOR.dialog，加载后调用CKEDITOR.skins.load( this, 'dialog', onDialogFileLoaded )，回调方法onDialogFileLoaded调用dialog的openDialog，此方法中会调用new CKEDITOR.dialog( this, dialogName )，实例化一个dialog对象，在实例化过程中会调用editor.theme.buildDialog，会调用theme.js的 buildDialog，此方法会调用addpage方法，调用 CKEDITOR.dialog._.uiElementBuilders.vbox.build，用vbox对应commonbuilder增加tab 的内容页，通过内容页的elements数组，生成页面元素，页面中的元素会通过自己的builder生成相应的对象（如 CKEDITOR.ui.dialog.textInput），创建html内容并输出(dialogui/plugin.js)。