鲁达 提到富文本编辑器，可能前端童鞋并不陌生。今天我要推荐的富文本编辑器就是 CKEditor ，趁着最近项目的使用热劲，整理一些实用笔记，以备不时之需。
一、快速构建
按照官网指南，我们可以迅速的下载到适合项目的文件包，大致分为四种：
- 基础包
- 标准包
- 完整包
- 定制包
二、简单使用
当你下载好项目文件后，使用非常简单：
- 包含类库文件
- 创建 textarea
- 使用 CKEDITOR.replace() 替换存在的 textarea
参考代码如下：
三、关于插件
CKEditor 包含两类插件，一类是面板插件 Plugin，另一类是内容部分插件 Widget：
- CKEditor Plugin
- CKEditor Widget
四、CKEditor 获取 DOM 数据
我们可以通过 getDate() 来获取 DOM 元素，然后做一系列处理，之后填充会内容输入区。
这样的场景适合对输入内容有一些格式要求的情况，具体代码如下：
五、CKEditor 去除粘贴样式
有一种场景可能我们并不像保留用户直接贴进来的内容，所以这时候可以去除粘贴样式，也就是只保留纯文本：
六、CKEditor 监听 Undo 和 Redo 事件
除此为外，撤销和重做也是高频使用的操作，我们需要监听编辑器的 beforeCommandExec 事件：
七、CKEditor 如何处理撤回操作
场景：用户操作后，需要撤销之前的操作，做一次回退，但不能保留程序代码的过程。
var data = edi(); edi( data );八、设置光标位置
光标位置一直是富文本编辑器的难点，很多编辑器在进行多次组合操作后，都会出现光标异常的情况，这时候需要人工修正一下：
九、事件监听
我们可以监听 change 事件，还有编辑器处于何种模式下，譬如源码模式：
十、递归获取元素节点
获取元素节点，需要遍历 DOM 元素，所以需要用递归来实现，具体如下：
十一、如何处理选中的文本 Text
选中文本需要注意处理边界问题，我们可以拿到一些位置信息，然后个性化改造。当然，这取决于你是否要这么做：
十二、增加快捷键操作
如果要便捷操作，还需要添加插件 keystrokes ：
十三、CKEditor4 和 CKEditor5
CK4很强大，但是属于上一个时代的产物，因为 CK5 已经基本完成，对比之下，主要有如下特点：
- 高扩展性和可用性
- 新的数据模型
- ES6支持