哪怕需要的功能再基础,也不要自行研究富文本实现

51 阅读1分钟

**关键词:**富文本、tinymce、wangeditor、range、selection

我最近的工作项是开发 PC 建站中的文本模块,可以像富文本一样操作,但是又不需要富文本那么多功能,大概只需要:

  1. 字体
  2. 字号
  3. 粗体
  4. 斜体
  5. 下划线
  6. 列表
  7. 标题
  8. 对齐方式

这几个功能,其中对齐方式吧只需要设置 text-align,那就只有7个小功能,感觉使用 execCommand 这个命令都能覆盖得住,看起来不太难就调用个 execCommand API,但最后实际发现并非如此,有太多衍生项目和细节了,比如:

  1. 字号设置原生只能设置 h1-h6,没办法根据你提供的字号进行设置
  2. 其他等等,主要涉及到很多 Range 和 Selection 的光标判断、内容折叠、获取、恢复、缓存等不好处理

因此强烈建议:即使是产品需要的富文本功能再基础,也不要想着自己用 execCommand 实现,毕竟需求是不断添加、不断完善的,要为以后的扩展性考虑,最后直接使用成熟的富文本产品,如 tinymce 等。
除非你的工作主攻方向就是富文本编辑器,比如你在语雀文档部门里负责语雀文档编辑器的开发、腾讯文档部门里负责开发腾讯文档编辑器的开发等等。

参考

你还可以在以下地址找到本文: