使用document.execCommand实现简单的富文本本

效果图

1.最开始的思路是菜单栏使用常规的icon图标后，下面的可编辑页使用textare,但是里面的内容是文本，并不会把标签进行编译


后续通过搜索得知富文本实现的重要2个点

1. contentEditable=“true” 使元素可编辑，
2. 使用document.execCommand允许运行命令来操纵可编辑内容区域的元素
   在元素上加入了
   contentEditable=“true”属性后这个div的内容就可以经行编辑了这个是实现的第一步.后续的想法是使用$(’#id’).html(‘标签的文本’) 使用jq的html方法经行对里面的内容的编辑，初步想了下是很繁琐的我要是想实现某个字加粗，某个字段颜色改变，某几个子字体超大作为标题如何实现？
   后面通过了解得知js给我们准备了api来实现，document.execCommand 使用这个属性我们就可以避免掉哪些字段被选中了，后面输入的文字是什么状态，这些逻辑我们就不需要考虑了。
   实现了布局后和部分逻辑编写后发现一个问题
   
   当选择一个字段后点击上面的icon的标签被选中的就会失去被选中的效果了，但是这个问题也不知道怎么描述百度。。后续自己的摸索发现button按钮在点击后不会取消原来的选中效果,后面在span标签包裹着button问题完全解决
   
   
   demo地址：https://github.com/q378532364/simpleEditor