前言
- 这只是一个小demo，代码和功能只有小部分，有着小小的思路，也给接下来的更多的功能奠定了思路和方向
- 实现方式和代码并不是很优雅，如果有这方面经验的大佬希望多多赐教
- 如果有更好的实现思路和方向希望多多交流
完成的功能
- 加粗、n级标题和基础的加颜色（是不是没想到功能辣么少）
- 实例互斥
- controller可配置
用到的API
- window.getSelection 获取选区
- (document | window).execCommand(
aCommandName,aShowDefaultUI,arg) 执行指令
或不多说，暂直接上思路
思路
最初
认为使用execCommand执行命令可以直接改变选区的内容，事实也是如此。
写的时候却被直接打脸，当时是这样的
开始
按照正常的思路去写，但是实现后却发现，在与控件交互时，会直接导致选区的丢失。
由于用户使用时，是与控件交互来操作的，那么需要点击、移入、移出或移动的行为，但控件这里最主要的还是点击
最主要的还是点击，但点击导致选区丢失后，execCommand执行的代码会直接执行失败（大多数），从而直接使控件的交互无效，这样我们是不能接受的
解决问题
最初的思路也是想在点击前保留选区，先是用select（input上的select），但是，只有输入框上有select [崩溃脸.jpg]，行不通！
恰好几天前在MDN上看见一个
示例，仔细一看，使用的还是form包裹可编辑元素来实现的，这就有点麻烦了，非要用个form来套着也太麻烦了，留做备胎
看源码解决问题
换wangeditor示例瞅瞅（看到裸div，[震惊脸.jpg]），直接clone源码，越看越觉得奇妙，大致思路就是，在一些时间触发后使用的是window.getSelection获取实例，然后用来获取用户选择的选区，在保存下来，在执行指令时，恢复选区，执行后，再次恢复执行前的选区，避免选区丢失。
遇到的问题
最初认为的是可以直接使用execCommand来设置选中的文字，但是，写的时候问题就出来了
问题: 在点击控件时，直接导致失焦，在execCommand执行时导致了选区的丢失，从而导致执行命令无效
解决: 看wangeditor源码，找到了getSelection这个API，可用于获取选区，操作选区等（重要）
小结
这个小demo也是给了我很多思路，遇到的问题也不是很大，接下来，继续深入哈。
看了小部分的wangeditor后，感悟到，现成的代码既然能应用在大部分生产环境，对于我来说，有很多借鉴的思路。
