从0实现富文本编辑器

以下先说下个人思路，属于个人想法，还未实现

暂时不考虑性能，假设浏览器的性能无限强大

先给定一个模块div，用来让用户编辑，假设第一条给定一个input框，用户输入n个字符点击回车，创建n个span元素，span元素里面的内容就是input里面对应的value值，原来的input被删除，在结尾处创建br元素，并且在第二行在创建一个input重复以上内容。

下面思路改进

限定input中value的长度为1，当用户输入超过一个字符就立马创建一个span，span内容就是input中的value值，当用户点击回车时br元素，第二行重复以上操作。当用户点击tab时，创建四个span，span里的值为一个空格，当用户点击退格键时，则删除前一个span元素。

以上均无鼠标操作

下面解决鼠标光标位置问题

给定div一个宽度为n，高度为n的一个盒子，鼠标光标默认是一条宽度1px高度5px的长方体可以用i标签表示，初始位置在第一个input前面，第二次位置在第一个span元素后面，当用户编辑时候，换句话说总是在最后一个span后面，最后一个input前面。给定所有的span默认位置，当用户点击div区域，可以先给所有的span元素后方增加一个标签，(第一个span元素前方也加)用来接收点击事件(等等，span与span之间是文本区域，也就是空格，不过这里为了保险起见还是采用此方法)用来接收鼠标的点击事件，点击后，找到该位置的元素，并建立input供用户编辑。然后重复以上所有的套路

其实这里应该不需要input，div有一个方法(加啥名字忘记了)，可以让用户编辑div里面的内容，然后对应的判断用户的操作类似的重复以上内容。

下面实现的是一个代码高亮功能，可以根据空格再重新把几个span元素外面增加一个标签，通过正则匹配来匹配标签里的内容是否符合正则里特定的字符串(好长，好长的正则)如果匹配成功，则给该标签特定的颜色 (我去，我不应该用正则，用个对象多好)。

由此再拓展出代码提升功能来方便用户更加快捷的输入。

我去，刚才忘记个事，鼠标应该还有选中功能，选中复制，选中删除，点击，这里具体功能大家应该可以明白，无法就是进行各种一系列的操作，突然间还是比较复杂的，不过不惧，慢慢来。

下面来考虑性能问题，不得不说以上操作不是耗费性能，已经快(无法用语言描述，里面各种dom操作，各种增删该查，想想还是及其可怕，更加可怕的是每一次都会引起页面重绘)，于是接下来就是优化性能

必须采用面向对象的方式，每一个dom都有自己的属性，把方法全部放在原型上

二，提前就把一些自己指定的dom放在页面上，尽可能减少dom操作(能少多少)

三，利用树形图的模式，看看能不能把每次dom刷新，只刷新单条线上的dom，而不是全部(参考angular里面的单向数据流与domtree)

文章写到这里已经1点半，当然这篇文章只是自己个人的想法和思路，我打算明天以这样的思路去一步一步填坑(当然肯定会有大量的bug出现，我已经做好了不是特充足的心理准备)

ok，我目前还是前端小白，好多知识点不是特扎实，希望各位大牛请勿看文章(看也没关系，我已经做好被嘲笑加鄙视的准备)

我是吴昊，一个野生程序猿，goodbye。you have a good dream。