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
- 大小: 53.1 KB
分享到:
相关推荐
CKEditor示例源码 源码描述: CKEditor示例源码 在.net中加入CKEditor编辑器在编写内容, 里面有配置方法存放在docs文件夹下 源码是一个示例,欢迎感兴趣的用户下载学习
ckeditor源码,包括配置文件,使用举例
内附JSP中使用CKEditor源程序实例以及CKEditor配置使用说明,以及怎么选择性的使用工具栏的条目,设置样式风格,大家可以参考,希望对大家有帮助
截止2018年1月1号最新的ckeditor4源码,17.6M大小,非常值得研究和学习。特别是想扩展它的插件。
ckeditor编辑器源码 v3.2.1
CKEditor代码高亮整合示例源码 项目描述 此示例把编辑器ckeditor和代码高亮syntaxhighlighter两个插件 整合到一起,这样编辑器就可以高亮显示代码信息了。 读起来很舒服。 欢迎感兴趣的用户下载学习。
商业源码-编程源码-ckeditor狐狸版源码.zip
ckeditor数学公式编辑 可视化编辑 所见即所得 操作方便
最近项目用到富客户端编辑器,用到了ckeditor.官网下载的是压缩过的,于是在网上找了一下未压缩的ckeditor源代码.分享给大家.
CKEditor,Ckfinder上传图片详解及部分示例源码,很全,很详细,
CKEditor和CKFinder在ASP.NET的应用和演示文档。 CKEditor和CKFinder在ASP.NET项目中安装,配置和使用详解。 http://write.blog.csdn.net/postedit/22868963
ckeditor_3.0.2 在线剪辑器 fckeditor的最新版本,php,asp.net,jsp都可以用 源码附送
本插件源码来自互联网,由于源代码基于ckeditor3.6.61,故对源码进行过简单修改,以求适应ckeditor4.4.7
CKeditor控件 .net版 源码及使用示例,有源码,和使用实例
找了半天才找到源代码,5.7M,非常值得学习和借鉴
ckeditor Fckeditor 上传 带上传例子 java 加压war包放在tomcat webapps 目录下 然后启动tomcat
.net环境下ckeditor与ckfinder学习笔记 ckeditor 3.0.1学习笔记 一.ckeditor 3.0.1精简 精简前:4.52M 精简后:853K 1.删除_samples和_source文件夹,分别为示例文件和未压缩源程序 2.删除lang文件夹下除zh-...
把ckeditor 3.4的ckeditor.js复盖就行
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...