web富文本编辑器

1.极简实现

当前chrome浏览器提供最简单是用方式，一个是给盒子添加contentEditable属性，另一个是在文档加载完毕手动设置编辑模式，即：document.designMode = 'on'

1. <div contentEditable></div>
2. <script>document.designMode = 'on'</script>

浏览器自带功能，大多数浏览器均可以正常使用。

1.1 编辑内容

• 相当于直接将元素视为文本输入框，可以自由编辑html文档，富文本的内容即为html string。
• 由于多数情况下，在富文本编辑之后需要存储并需要保留格式，因此多数富文本均为行内样式，即inline style。

1.2 操作流程

开启编辑模式→编辑富文本对象→获取富文本html字符串→保存→展示

1.3 编辑API-document.execCommand

document.execCommand(cName, boolearn, argument)

• 命令的名称
• 是否展示用户界面
• 命令的参数

注：对于这些命令的使用需要根据语义或api详细说明的动作下

developer.mozilla.org/zh-CN/docs/…

1.4 写在中间-execCommand问题

• 不够灵活，无法定制，如：元素添加class
• 生成b,font等不够简洁的、语义化的、现代化的tag
• 诸多的不兼容性

1.5 选区API-Range

绕不开的选区range

1.document.createRange

2.window.selection

developer.mozilla.org/zhCN/docs/W…

2.模拟实现

即通过常用元素结合自定义API模拟输入模式,一个完整的符合操作习惯的eidtor应包含以下方面：

1. 操作按钮面板 toolbar
2. 内容区基本的新增、修改、删除 add insert update delete
3. 元素的对齐方式、间距、背景 verticle margin padding background
4. 文本的格式 text
5. 超链接的处理 link
6. 多媒体信息的支持 video audio
7. 上传功能 img
8. 撤销、恢复 redo undo
9. 格式刷 style copy
10. 常用按键的支持 event
11. 具有可扩展性等 extend

2.1模拟编辑器

2.2模拟编辑器

此架构下的编辑器模拟对象有： 模拟可输入的输入框、模拟光标、模拟选区、模拟浏览器指令、模拟事件、自定义扩展

2.3模拟编辑器实例

wangEditor、禅道kindeditor、CKEditor、confluence

附加了解 实时文档协作：Websocket，非必须但是趋势