我们的只用在文件里面引用一个CKEditor的js文件--CKEditor目录下的ckeditor.js文件, 该文件会完成后续的所有的CKEidtor依赖的js文件的加载.
所依赖的js文件加载顺序如下
<script src="/Scripts/CKEditor/CKEditor.js"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/loader.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/event.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/editor_basic.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/env.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/ckeditor_basic.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/tools.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dtd.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/event.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/domobject.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/node.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/window.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/document.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/nodelist.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/element.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/documentfragment.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/walker.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/range.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/iterator.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/command.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/ckeditor_base.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/config.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/filter.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/focusmanager.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/keystrokehandler.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/lang.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/scriptloader.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/resourcemanager.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/plugins.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/ui.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/editor.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmlparser.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmlparser/basicwriter.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmlparser/node.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmlparser/comment.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmlparser/text.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmlparser/cdata.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmlparser/fragment.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmlparser/filter.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmldataprocessor.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/htmlparser/element.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/template.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/ckeditor.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/creators/inline.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/creators/themedui.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/editable.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/selection.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/style.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/comment.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/elementpath.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/text.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/dom/rangelist.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/skin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/_bootstrap.js" type="text/javascript"></script> <style> .cke { visibility: hidden; } </style> <meta name="viewport" content="width=device-width"> <script src="http://localhost:9673/Scripts/CKEditor/config.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/skins/moono/skin.js" type="text/javascript"></script> <link href="http://localhost:9673/Scripts/CKEditor/skins/moono/editor_ie.css" rel="stylesheet" type="text/css"> <script src="http://localhost:9673/Scripts/CKEditor/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/styles.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/dialogui/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/dialog/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/about/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/a11yhelp/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/dialogadvtab/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/basicstyles/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/bidi/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/blockquote/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/clipboard/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/button/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/panelbutton/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/panel/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/floatpanel/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/colorbutton/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/colordialog/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/templates/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/menu/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/contextmenu/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/div/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/resize/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/toolbar/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/elementspath/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/enterkey/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/entities/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/popup/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/filebrowser/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/find/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/fakeobjects/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/flash/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/floatingspace/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/listblock/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/richcombo/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/font/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/forms/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/format/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/horizontalrule/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/htmlwriter/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/iframe/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/wysiwygarea/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/image/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/indent/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/indentblock/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/indentlist/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/smiley/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/justify/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/menubutton/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/language/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/link/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/list/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/liststyle/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/magicline/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/maximize/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/newpage/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/pagebreak/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/pastetext/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/pastefromword/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/preview/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/print/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/removeformat/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/save/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/selectall/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/showblocks/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/showborders/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/sourcearea/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/specialchar/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/scayt/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/stylescombo/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/tab/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/table/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/tabletools/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/undo/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/wsc/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/aaa/plugin.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/about/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/basicstyles/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/bidi/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/blockquote/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/clipboard/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/button/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/colorbutton/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/colordialog/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/templates/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/contextmenu/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/div/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/toolbar/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/elementspath/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/find/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/fakeobjects/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/flash/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/font/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/forms/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/format/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/horizontalrule/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/iframe/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/image/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/indent/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/smiley/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/justify/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/language/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/link/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/list/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/liststyle/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/magicline/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/maximize/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/newpage/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/pagebreak/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/pastetext/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/pastefromword/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/preview/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/print/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/removeformat/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/save/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/selectall/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/showblocks/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/sourcearea/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/specialchar/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/scayt/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/stylescombo/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/table/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/undo/lang/zh-cn.js" type="text/javascript"></script> <script src="http://localhost:9673/Scripts/CKEditor/plugins/wsc/lang/zh-cn.js" type="text/javascript"></script>
以样式为分界点, 以上的部分为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编辑器,实际上我们可以这样
<div id="editor01"></div> <div id="editor02"></div> <script type="text/javascript"> (function () { var editor01 = CKEDITOR.replace('editor01'); var editor02 = CKEDITOR.replace('editor02'); })(); </script>
页面中所有的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'] ] });