ckeditor 源码概述

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

 

 

 

 

评论

6 楼 wooodyhuang 2011-03-21  

binoruv 写道

在extjs里用Ext.ux.ScriptLoader.js动态加载ckeditor.js会出现 'container.getChild(...)' 为空或不是对象，

直接在网页中引用ckeditor.js关闭编辑窗口时会出现'container.getChild(...)' 为空或不是对象。

我用的是一个网上找的扩展Ext.form.CKEditor.js，太崩溃了。

我使用的是struts2-jqeury插件集成的，在IE8中碰到一样的问题

5 楼 yiminghe 2010-10-22  

binoruv 写道

yiminghe 写道

binoruv 写道

在extjs里用Ext.ux.ScriptLoader.js动态加载ckeditor.js会出现 'lang.contextmenu.options' 为空或不是对象

试试 kissy editor

http://kissyteam.github.com/kissy-editor/demo/static-min-test.html

搞定了 ，kissy editor这个东东是免费的么？

是的

4 楼 binoruv 2010-10-22  

yiminghe 写道

binoruv 写道

在extjs里用Ext.ux.ScriptLoader.js动态加载ckeditor.js会出现 'lang.contextmenu.options' 为空或不是对象

试试 kissy editor

http://kissyteam.github.com/kissy-editor/demo/static-min-test.html

搞定了 ，kissy editor这个东东是免费的么？

3 楼 yiminghe 2010-10-21  

binoruv 写道

在extjs里用Ext.ux.ScriptLoader.js动态加载ckeditor.js会出现 'lang.contextmenu.options' 为空或不是对象

试试 kissy editor

http://kissyteam.github.com/kissy-editor/demo/static-min-test.html

2 楼 binoruv 2010-10-21  

在extjs里用Ext.ux.ScriptLoader.js动态加载ckeditor.js会出现 'lang.contextmenu.options' 为空或不是对象

1 楼 binoruv 2010-10-21  

在extjs里用Ext.ux.ScriptLoader.js动态加载ckeditor.js会出现 'container.getChild(...)' 为空或不是对象，

直接在网页中引用ckeditor.js关闭编辑窗口时会出现'container.getChild(...)' 为空或不是对象。

我用的是一个网上找的扩展Ext.form.CKEditor.js，太崩溃了。