UDN-企业互联网技术人气社区

板块导航

浏览  : 2210
回复  : 2

[xHTML\CSS] 富文本编辑器小结

[复制链接]
葡萄柚的头像 楼主
  近况

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

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

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

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

  无处不在的坑

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

  div还是p

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

  这里就已经不太符合我们要求了,不想要各种div标签在文本外面,语义化来说,我们应该用p标签才对。

  解决方案: 初始化添加一个p标签,并且里面加入一个br
  1. <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>") ,它能添加或者更换,但是要取消他的时候,就不起作用了。

  解决方案: 在执行代码的时候,多加一个判断,判断当前选中文字的外标签是什么,再决定是需要执行什么命令。
  1. let Range = document.getSelection().getRangeAt(0),
  2.      formatName = Range.commonAncestorContainer.parentElement.nodeName === 'BLOCKQUOTE' ? 'P' : 'BLOCKQUOTE';
  3. document.execCommand('formatBlock', false, formatName)
复制代码

  removeFormat并不是万能的

  清楚格式这个命令,主要会清除掉附带在标签上的内联样式,也就是style,但是不会清除class名称,这意味着,从外部粘贴过来的文本,如果不幸的ClassName和你的css里面的ClassName重复了,就会带上你的css样式。而且也不会清楚里面内联元素标签,什么意思呢?就是span都还是存在的,从原理上来说这个不影响最后的显示,但没有必要需要这些个标签,很容易产生其他的问题。

  解决方案:执行清楚格式操作的时候,多加一些操作,把无用的样式,标签和ClassName全部干掉。(此处必须有杀气!)

  其他

  至于其他的很多命令(indent,fontSize,fontColor...),我这里没有使用,也不知道是否有坑,原因是前面说到的样式统一,保证美观,不支持内联样式,由统一的css样式渲染。

相关帖子

发表于 2016-11-10 10:09:28 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老面孔的份上回复一下
使用道具 举报

回复

发表于 2016-11-10 13:06:57 | 显示全部楼层
Very Good!
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部