预览地址： 点我

项目使用Webpack搭建TypeScript开发环境。

1. 首先第一步使用npm init -y快速初始化，生成完成后，目录中会生成package.json文件。

2. 下面我们安装Webpack的相关依赖

npm i webpack webpack-cli webpack-dev-server -D

3. 安装ts-loader开发依赖

这里是对 ts 文件进行解析，暂时用到的是 ts-loader，所以先安装这个 loader，其他用不上的 loader 先不装。

npm i ts-loader -D

4. 局部安装 TypeScript

npm i typescript

5. 安装plugin插件

npm i html-webpack-plugin -D

依赖安装完成后，我们在根目录中新建 webpack.config.js 文件，用于Webpack的配置说明。

配置文件详见，对重要部分进行了注释说明。 点我

配置好webpack.config.js后，我们添加npm scripts进行项目启动。

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.js",
  "build": "webpack --config webpack.config.js"
}

此时我们新建src/index.ts，输入

const num: Number = 1;
console.log(num);

执行 npm run dev，项目启动以后，打开localhost:9000，打开控制台，可以看到正常输出了，说明我们的环境配置成功了。

使用contenteditable 属性

contenteditable 是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。

该属性必须是下面的值之一：

• true 或空字符串，表示元素是可编辑的；
• false 表示元素不是可编辑的。

如果想要通过设置来编辑内容的格式，如常规的设置标题、文字加粗、超链接等，而实现这些功能的 API 通常是document.execCommand()，这个方法是与富文本编辑器进行交互的主要方式。

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);

返回一个 Boolean，如果是 false 则表示操作不被支持或未被启用。

• aCommandName 一个 DOMString ，命令的名称。可用命令列表请参阅 命令 。
• aShowDefaultUI 一个 Boolean， 是否展示用户界面，一般为 false。Mozilla 没有实现。
• aValueArgument 一些命令（例如 insertImage）需要额外的参数（insertImage 需要提供插入 image 的 url），默认为 null。

更多的操作命令也请参考 MDN 文档，文档传送门跳转如下：

文档传送门

我们新建src/lib/editor.ts文件：

首先创建一个Editor：