ckeditor是目前各个浏览器间比较统一的富文本编辑器,相对于 yui2 editor ,其更注重兼容性问题,花了很大力气实现了等价于 w3c range 的功能,并且完全不采用 document.execCommand 这一浏览器的原生功能(兼容性问题严重),仅仅依赖dom操作来分隔节点与插入格式化标签到对应位置。
源码概述:
通过引入最小的种子文件ckeditor_source.js,即可通过模块依赖计算动态加载完整的编辑器功能代码:
<textarea id="t"></textarea> <script type="text/javascript" src="ckeditor_source.js"></script> <script type="text/javascript"> CKEDITOR.replace("t"); </script>
包括:
ckeditor_source.js:定义CKEDITOR命名空间以及编辑器实例容器,启动动态加载
_source/core/loader.js:定义代码模块依赖以及动态加载机制
_source/core/event.js:自定义事件机制
_source/core/editor_basic.js:编辑器类定义
_source/core/env.js:浏览器探测机制
_source/core/ckeditor_basic.js:通过CKEDITOR快捷创建ckeditor实例到等待列表
_source/core/dom.js:定义dom基础类空间
_source/core/tools.js:语言级基础工具类库
_source/core/dtd.js:javascript表达的官方规范:xhtml1-transitional.dtd,
core/dom/*.js:dom基础类库,富含dom修改与遍历操作
例如:
_source/core/dom/elementpath.js:节点路径标识
_source/core/dom/range.js:等价w3c range 利用 dom操作的javascript实现
_source/core/command.js:编辑器命令抽象统一
_source/core/config.js:所有编辑器的公共配置
_source/core/focusmanager.js:多编辑器间焦点管理
_source/core/lang.js:多语言载入与探测
_source/core/scriptloader.js:脚本动态载入基础库
_source/core/resourcemanager.js:统一的资源管理与加载容器
_source/core/plugins.js:插件资源管理与加载容器
_source/core/skins.js:皮肤(js,css)管理与加载容器
_source/core/themes.js:主题(功能,皮肤)管理与加载容器
_source/core/ui.js:编辑器实例的整体ui与feature管理
_source/core/editor.js:编辑器类完整功能与实例相关资源加载初始化代码
htmlparser/*.js :编辑器代码整理去冗parser
_source/core/ckeditor.js:编辑器管理类完善与调用_bootstrap.js启动实例初始化
_source/core/_bootstrap.js:加载核心插件后初始化等待的编辑器实例
调用editor.js初始化等待的编辑器实例
skins/*.js:皮肤定义
lang/*.js:操作语言定义
plugin/*/plugin.js:插件代码,监听编辑器实例事件,附加操作到各个编辑器。
例如:
font/plugin.js:字体样式处理
colorbutton/plugin.js:前景背景处理
selection/plugin.js:原生range与ckeditor range的相互转化
styles/plugin.js:利用range对格式代码进行定位插入操作。
plugin/dialog/*.js:插件按需加载的输入对话框功能代码
重要代码图解:
关键为:
core/dom/range.js
core/dom/walker.js
plugin/styles/plugin.js