提到富文本编辑器，可能前端童鞋并不陌生。今天我要推荐的富文本编辑器就是 CKEditor ，趁着最近项目的使用热劲，整理一些实用笔记，以备不时之需。

一、快速构建

按照官网指南，我们可以迅速的下载到适合项目的文件包，大致分为四种：

• 基础包
• 标准包
• 完整包
• 定制包

二、简单使用

当你下载好项目文件后，使用非常简单：

• 包含类库文件
• 创建 textarea
• 使用 CKEDITOR.replace() 替换存在的 textarea

参考代码如下：

三、关于插件

CKEditor 包含两类插件，一类是面板插件 Plugin，另一类是内容部分插件 Widget：

• CKEditor Plugin
• CKEditor Widget

四、CKEditor 获取 DOM 数据

我们可以通过 getDate() 来获取 DOM 元素，然后做一系列处理，之后填充会内容输入区。

这样的场景适合对输入内容有一些格式要求的情况，具体代码如下：

五、CKEditor 去除粘贴样式

有一种场景可能我们并不像保留用户直接贴进来的内容，所以这时候可以去除粘贴样式，也就是只保留纯文本：

六、CKEditor 监听 Undo 和 Redo 事件

除此为外，撤销和重做也是高频使用的操作，我们需要监听编辑器的 beforeCommandExec 事件：

七、CKEditor 如何处理撤回操作

场景：用户操作后，需要撤销之前的操作，做一次回退，但不能保留程序代码的过程。

var data = editor.getSnapshot();
editor.loadSnapshot( data );

八、设置光标位置

光标位置一直是富文本编辑器的难点，很多编辑器在进行多次组合操作后，都会出现光标异常的情况，这时候需要人工修正一下：

九、事件监听

我们可以监听 change 事件，还有编辑器处于何种模式下，譬如源码模式：

十、递归获取元素节点

获取元素节点，需要遍历 DOM 元素，所以需要用递归来实现，具体如下：

十一、如何处理选中的文本 Text

选中文本需要注意处理边界问题，我们可以拿到一些位置信息，然后个性化改造。当然，这取决于你是否要这么做：

十二、增加快捷键操作

如果要便捷操作，还需要添加插件 keystrokes ：

十三、CKEditor4 和 CKEditor5

CK4很强大，但是属于上一个时代的产物，因为 CK5 已经基本完成，对比之下，主要有如下特点：

• 高扩展性和可用性
• 新的数据模型
• ES6支持