关于typescript:使用Ts从零实现以一个简易编辑器

小指标

1. 应用 ts 从零实现一个简略的富文本编辑器
2. 初步实现“设置题目”，“加粗”，“设置色彩”这几个基本功能

常识筹备

1. contenteditable 属性

   给任何一个元素加上contenteditable="true" 便可使其可编辑，由此为根底便可实现一个简略的富文本编辑器了。

   <div contenteditable="true"></div>

2. Document.execCommand()

   当 HTML 文档切换到 designMode 时，它的文档对象将公开一个 execCommand 办法来运行操作以后可编辑区域的命令，如表单输出或可满足元素。

   document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

实现过程

1. 初始化我的项目

   "lint": "eslint . --ext .js,.ts",
   "build": "webpack --env production",
   "start": "webpack-cli serve"

   基于 webpack 搭建一个根底我的项目，yarn start 用于本地开发。yarn build 用于构建生产文件。

2. 确定繁难富文本编辑器的调用形式

   import Editor from '../src/editor';
   
   new Editor('#editor_root', {
     style: {height: '300px',},
   });

3. 初始化编辑器构造

4. 实现编辑器菜单

总结

1. 繁难富文本编辑器的基本功能已实现
2. webpack目前尚不反对 export library 为es6 module
3. 尚未增加单元测试
4. document.execCommand已被标记为Obsolete

源码地址