原生js实现轻量级文本编辑器
最近使用原生js写了一个轻量级的文本编辑器，那么今天就来说一下
- 从构想到完成究竟是怎么实现的，
- 怎么来对他进行使用，
踩到的坑且是怎样解决的
经常 使用Markdown来写博客，一直觉得这个东西方便且看不懂，最近才了解了这方面的原理。下面，我们先来看看它呈现出来的效果图：
如何实现
1、布局：总的来说，body里面的内容分为上面命令的操作控制区，下面的文本编辑可视化区，上面的每组指令都是一个div框，它们都是行内块级元素–“display: inline-block”，使用css样式对其进行修饰；底下的控制台输出button将其内容输出在控制台。
2、Web api的使用：
1>bool=document.execCommand(aCommandName,aShowDefaultUI,aValueArgument); 当一个html文档切换到设计模式时，document暴露了execCommand方法，该方法允许运用命令来操纵可编辑区域的内容；大多数命令影响document的 selection（粗体，斜体等），当其他命令插入新元素（添加链接）或影响整行（缩进）。具体的语法规则如下：
2>HTMLElement.dataset
HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。注：dataset 属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据属性。（.dataset 表示获取元素属性的集合），如下所示：
3>h5新特性（data-*）
data-用于存储页面或应用程序的私有自定义数据，data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验。
注：用户代理会完全忽略前缀“data-”的自定义数据。3、页面的可编辑化
为了使页面能够可编辑化，我们添加了一个新的属性，即：contenteditable=“true”。当使用contenteditable,调用execCommand将影响当前活动的可编辑元素。如何使用
此编辑器的使用主要是：在文本区域编辑自己想要写的东西，然后使用光标选中文本内容，点击控制区域的按钮，对所选中的文本进行样式的修改，点击最底下的控制台button，可以将文本区域的内容粘贴在控制台上（包含HTML标签）
踩过的坑
1、在使用document.execCommand(paste，false，null)方法的时候，对剪切板中的内容不能够进行粘贴，
解决方法：经查阅资料：document.execCommand()方法属于IE的内核，大部分命令在别的浏览器中都实现了兼容，但粘贴功能是不能够实现的；但是为了实现这个想法，我们可以自己写功能函数来自定义方法，对其进行封装；在我写的时候网上已经贴出了功能函数的代码，大家可以自行百度，这里就不再做过多的提及。
2、我将控制区域的每块内容都看作一个div框，我们将div框使用“display:inline-block”设置成块级内联元素，div框里面的a链接标签设置成内联样式，但是奇怪的是，div框里面的a链接标签之间还是像块级元素一样展示，对其添加的样式也不起作用；
解决方法：我就将其设置成块级元素，使用margin属性来使其合并在一起，从而解决了这个问题。
如果有感兴趣的同学，欢迎一起讨论，github地址