ckeditor 源码概述

10/27/2013 5:02:54 AM

ckeditor是目前各个浏览器间比较统一的富文本编辑器,相对于 yui2 editor ,其更注重兼容性问题,花了很大力气实现了等价于  w3c range 的功能,并且完全不采用  document.execCommand 这一浏览器的原生功能(兼容性问题严重),仅仅依赖dom操作来分隔节点与插入格式化标签到对应位置。

 

 

源码概述:

 

通过引入最小的种子文件ckeditor_source.js,即可通过模块依赖计算动态加载完整的编辑器功能代码:

 

Js代码  收藏代码
  1. <textarea id="t"></textarea>  
  2. <script type="text/javascript" src="ckeditor_source.js"></script>  
  3. <script type="text/javascript">  
  4. CKEDITOR.replace("t");  
  5. </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