富文本编辑器小结

近况

最近由于公司业务上的需求,我们需要一个自己的编辑器来编写我们得到APP里面的订阅文章,为什么需要自己的编辑器,主要是因为用第三方的编辑器很难完成公司定制化的需求,比如:排版上我们想要更好看点,统一,因为各个订阅专栏编辑的人不一样,容易造成各种不同的审美差异,解决方案有2种:

  1. 采用一个可定制化的第三方富文本编辑器,然后自己写插件来满足自己的要求。

  2. 自己写一个富文本编辑器。

最后和团队的人商量决定,自己撸一个吧,因为使用第一种方案,依赖于别人的开源插件,总是不太放心,而且害怕到时候有什么问题,要研究他们的源码,那就跟自己写差不多多少,而且我们自己撸一个,并非要写一个非常通用,可以开源的富文本编辑器,我们只需要针对我们自己业务,写一个定制化符合公司使用的编辑器就行了。综上,我开始了这次非常愉快(坑爹)的编辑器之旅!!!

先看效果图,如图所示,如果有订阅了我们得到APP里面专栏文章的,可以对比下,现在和8月的文章就能看出来了。

文章大概效果

无处不在的坑

首先web端的富文本编辑器,基本命令参照documen命令文档,兼容性的问题就不说了,大家都知道,主要说说一些开发了才能知道的坑。

div还是p

可编辑模式下(是否支持可编辑可以用HTMLElement.isContentEditable
命令来查看的),如果内部没有P标签这个初始化标签,编写的时候,换行给你添加的标签将会是div,如图所示:

Paste_Image.png

这里就已经不太符合我们要求了,不想要各种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样式渲染。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,239评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 131,762评论 18 138
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 10,203评论 4 57
  • 今天听了老大的答疑会,感触最深的一点就是向自己认错,敢于正视自己,你究竟是在为谁做事? 正视自己: 来总部之前一个...
    英伦小兔子阅读 369评论 2 4
  • “好无聊啊……”刚刚和暧昧对象意见不合准备拉黑对方的A小姐把手机扔在一旁,翘起了粘在沙发上的腿。 对,没有男朋友,...
    laeticia阅读 202评论 0 0
  • 当一个孩子问“为什么”的时候,爸爸妈妈们该怎么回答,来鼓励他们得出自己的结论呢? 批判性思维是美国教育过程中着重培...
    精锐教育优氏英语阅读 211评论 0 2
  • 今天下午看到朋友圈一学姐发的: 做想做的事,去想去的地方,见想见的人… 这是我从大学开始的座右铭,毕业五年后发现,...
    林soon媛阅读 992评论 6 2