富文本编辑器

发展阶段

1. contenteditable + document.execCommand
2. contenteditable + 自定义实现 execCommand，规避浏览器 document.execCommand API 的各种问题，并能掌控内容变化和格式。代表产品 ueditor、ckeditor早期版本
3. 现代化进阶：保留contenteditable 属性，使容器可编辑即可；视图与数据分离，完全控制渲染逻辑，如 draft.js ckeditor后期版本
4. 后现代阶段：由于基于 contenteditable 编辑器，其输入是完全由用户掌握，会出现各种各样的 dom 结构，造成各种不可预知的行为结果。因此，抛弃contenteditable 属性，完全使用普通容器布局 + js 对 dom 事件监听，形成从输入到渲染的流程完整掌控的模式。代表产品： google docs office online icloud pages wps在线编辑器 等。

涉及 API

• document.execCommand（已废弃）
• Selection 对象，表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。
• Range 对象，表示一个包含节点与文本节点的部分文档片段。IE9 及以前用 textRange。