富文本编辑器总结

最近由于公司业务需要，需要一个自己的编辑器来编写我们在APP中获取的订阅文章。为什么需要自己的编辑器，主要是因为我们使用第三方编辑器，很难满足公司的定制化需求。例如，我们希望在排版上更加美观和统一。因为每个订阅栏目的编辑不一样，很容易造成各种审美差异。解决方案有两种：采用一种可以自定义第三方富文本编辑器，然后自己写一个插件来满足自己的需求。自己写一个富文本编辑器。最后和团队商量后，决定自己做一个，因为用第一种方案，依赖别人开源的插件，总觉得不放心，怕到时候出问题。如果你想研究他们的源码，那么就按照我们自己写的差不多，自己做一个，不是写一个很一般的开源富文本编辑器，我们只需要写一个定制的满足公司用于我们自己的业务。综上所述，我开始了这次非常愉快的（骗）编辑之旅！！！先看效果图，如图，如果你在APP里订阅过专栏文章，可以对比一下，可以看到现在到8月份的文章。无处不在的陷阱首先说一下web端的富文本编辑器，基本命令参考documen命令文档，兼容性问题就不说了，大家都懂的，主要说说一些开发后才能知道的坑。div仍然是p可编辑模式（可以使用[HTMLElement.isContentEditable](https://developer.mozilla.org...命令查看是否支持编辑），如果初始化标签里面没有P标签，写的时候，换行给你加的标签会是div，如图：这不符合我们的要求，我们不希望文本外有各种div标签，从语义上讲应该用ptags.tags.解决方法：初始加个p标签，加个br

删除，注意，这个坑和第一个一样，只是表达方式不一样，如果开始删除你的edits文本被删除后，整个editable元素变成空的，也就是说没有初始化的p标签，那么当你添加文本的时候，就会和上面的问题一样。解决方法：监听删除动作，判断里面是否有子元素。p标签未初始化。内联标签非常个性化。需要添加文字的内联标签，如：粗体、斜体、下划线、下标等，可以任意添加和取消，一般需要注意的是，不能随意更改相关标签的css特殊样式。打个栗子：bold在chrome中添加一个b标签，浏览器样式，font-weight:bolder;，如果你自己的css覆盖掉，改成font-weight:normal;，然后再点击，该取消的时候就会没有成功。原因是我没有找到文档。据我猜测，在取消时，判断条件是是否有相关命令的css样式，而不仅仅是文本的外部标签名称。formatBlock告诉你，并不是所有的牛奶都是高档的！使用formatBlock添加或替换文本外层标签时，要特别注意--BLOCKQUOTE，document.execCommand('formatBlock',false,"

")，可以添加或替换，但需要被取消时间，它不起作用。解决方法：在执行代码的时候，多加一个判断，判断当前选中的文本的外层标签是什么，进而决定需要执行什么命令。让Range=document.getSelection().getRangeAt(0),formatName=Range.commonAncestorContainer.parentElement.nodeName==='BLOCKQUOTE'？'P':'BLOCKQUOTE';document.execCommand('formatBlock',false,formatName)removeFormat不是清除格式的灵丹妙药。主要是清除标签附带的内联样式，即style，但不清除类名。这意味着从外面粘贴的文本，如果不幸的ClassName和你的css中的ClassName重复的话，它会带上你的css样式。而且不知道里面的行内元素标签，是什么意思？即使跨度仍然存在。原则上这不影响最终的显示，但是不需要这些标签，很可能会出现其他问题。解决方案：在进行清除格式操作时，添加一些操作，将无用的样式、标签和ClassNames全部清除掉。（这里肯定有杀机！）其他至于其他很多命令（indent,fontSize,fontColor...），我这里没有用过，不知道有没有坑。原因是上面提到的样式统一美观。支持内联样式，由统一的css样式渲染。