搭建框架
搭建了一个webpack + typescript 项目, 集成了eslint, prettier和 babel 分别配置 webpack 的开发 与 正式 配置 简单配置了 webpack 的 HMR, 让其可以满足正常的开发调试
思路
这个 editor 核心还是 基于 原生API document.execCommand 实现
- 先对最外层的 div 设置
contenteditable属性 让其成为可编辑元素 - 初始化对应的 配置 菜单项, 并分别生成对应的编辑区域 与菜单区域
- 对应菜单分别 实现 其 对应的 dom 结构, 绑定点击事件, 配置高亮方法
- 菜单点击时, 需考虑选区的问题, 设置
keyup与mouseup事件, 实时保存当前编辑区域内选区
贴上项目链接: github.com/lichenabson…
