现状
近来由于公司营业上的需求，我们须要一个本身的编辑器来编写我们获得APP内里的定阅文章，为何须要本身的编辑器，重要是由于用第三方的编辑器很难完成公司定制化的需求，比方：排版上我们想要更好看点，一致，由于各个定阅专栏编辑的人不一样，轻易形成种种差别的审美差别，解决计划有2种：
采纳一个可定制化的第三方富文本编辑器，然后本身写插件来满足本身的请求。
本身写一个富文本编辑器。
末了和团队的人探讨决议，本身撸一个吧，由于运用第一种计划，依赖于他人的开源插件，老是不太宁神，而且畏惧到时刻有什么题目，要研讨他们的源码，那就跟本身写差不多若干，而且我们本身撸一个，并不是要写一个异常通用，能够开源的富文本编辑器，我们只须要针对我们本身营业，写一个定制化相符公司运用的编辑器就好了。综上，我最先了此次异常兴奋（坑爹）的编辑器之旅！！！
先看效果图，如图所示，假如有定阅了我们获得APP内里专栏文章的，能够对比下，如今和8月的文章就可以看出来了。
无处不在的坑
起首web端的富文本编辑器，基础敕令参照documen敕令文档，兼容性的题目就不说了，人人都晓得，重要说说一些开发了才晓得的坑。
div照样p
可编辑形式下（是不是支撑可编辑能够用[HTMLElement.isContentEditable
](https://developer.mozilla.org… 敕令来检察的），假如内部没有P标签这个初始化标签，编写的时刻，换行给你增加的标签将会是div，如图所示：
这里就已不太相符我们请求了，不想要种种div标签在文本表面，语义化来讲，我们应当用p标签才对。
解决计划： 初始化增加一个p标签，而且内里到场一个br<p><br></p>
删除也要战战兢兢
这个坑跟第一个一样的缘由，只是表现形式差别，假如你最先删除你的编辑文本，删除完以后，悉数可编辑元素，就变成空了，意味着，又没有初始化的p标签，那末你在增加笔墨的时刻，就会跟上面的题目一样了。
解决计划：监听删除行动，推断内部照样否有子元素，没有初始化p标签
行内标签很有特性
增加文本须要的行内标签，比方： bold，italic，underline，subscript等等，能够恣意增加和作废，一般来讲没有任何题目，须要注重的是，你不能随便变动相干标签的css特别款式，炒个栗子：bold在chrome内里增加一个b标签，浏览器款式，font-weight：bolder;，假如你本身css给覆蓋掉，变成 font-weight: normal;，那末再次点击，应当作废的时刻，不会胜利的。缘由我没有找到文档，据我推想，由于是作废的时刻，推断前提为是不是有相干敕令的css款式，并不是纯真的笔墨外部标签称号。
formatBlock跟你说，不是一切的牛奶都是特仑苏！
运用formatBlock来增加或许替换笔墨的外标签时，要特别注重–BLOCKQUOTE这个东东,document.execCommand('formatBlock', false, "<blockquote>")，它能增加或许替换，然则要作废他的时刻，就不起作用了。
解决计划： 在实行代码的时刻，多加一个推断，推断当前选中笔墨的外标签是什么，再决议是须要实行什么敕令。
let Range = document.getSelection().getRangeAt(0),
formatName = Range.commonAncestorContainer.parentElement.nodeName === 'BLOCKQUOTE' ? 'P' : 'BLOCKQUOTE';
document.execCommand('formatBlock', false, formatName)removeFormat并不是全能的
清晰花样这个敕令，重要会清撤除附带在标签上的内联款式，也就是style，然则不会消灭class称号，这意味着，从外部粘贴过来的文本，假如不幸的ClassName和你的css内里的ClassName反复了，就会带上你的css款式。而且也不会清晰内里内联元素标签，什么意思呢？就是span都照样存在的，从道理上来讲这个不影响末了的显现，但没有必要须要这些个标签，很轻易发生其他的题目。
解决计划：实行清晰花样操纵的时刻，多加一些操纵，把无用的款式，标签和ClassName悉数干掉。（此处必须有杀气！）
其他
至于其他的许多敕令（indent，fontSize，fontColor…），我这里没有运用，也不晓得是不是有坑，缘由是前面说到的款式一致，保证雅观，不支撑内联款式，由一致的css款式衬着。
