富文本编辑--评论功能实现

1、前题：

在输入框/富文本中实现@功能，是web端比较成熟的案例，但实现起来还是有很多细节需要处理，比如：

1. 按住@的时候，弹出用户列表
2. @插入当前的光标位置，需要获取光标位置，将@选择框定位展示
3. @断开和触发细节，如@@@时不触发，@X(X为什么字符时触发)，y@(y为什么字符时不触发)
4. 生成@用户标签的规则是：高度、携带用户ID、一键删除、不可编辑等
5. 选择人员列表时候，支持鼠标选择，支持上下键+回车键选择，支持esc键退出选择框等
6. 输入框最好是富文本编辑器（难度会更大），支持文本高亮，加粗等富文本功能
7. 输入区块整体支持图片、视频等功能

2、流行方案对比

1. textarea、input(例：新浪微博)
   流程大概都是(监听keyup、获取@的光标位置…)，不过改动较大，所以推荐库给大家：
   • Tribute.js(推荐–ES6)
   • At.js(Jq)
2. contenteditable(例：QQ空间、掘金)
   • html5新属性规定元素内容是否可编辑，可以作为编辑器使用
   • contenteditable实现编辑器、光标、输入法处理
   • 基于contenteditable技术实现@选人功能
     3.富文本(例：TAPD)
   • 支持文本富态处理
   • 基于富文本组件，插件集成到富文本中，实现功能

3、方案

1. Antd、ArcoDesign(飞书)等组件库自带的mention组件
   

• 优点：
  • 引入即用，成本较低
• 缺点：
  • 这是个文本textarea输入框，@XX需要高亮显示时，无法做到
  • @断开和启动细节，如@@@时候不触发，@X(X为什么字符时触发)，y@(y为什么字符时不触发)，这些细节很难控制，不够灵活
  • 文本无法富态处理

2. contenteditable属性自己实现

• 优点：
  • 随便扩展
• 缺点：
  • @细节很多，需要一一实现
  • 此处，需从零实现一个富文本

3. wangEditor插件实现
   

• 优点：
  • 富文本显示
• 缺点：

  • @插件较为死板，需符合wangEditor自定义的一套插入机制，节点机制：
    

  • 定制的时候，除了要修改这个插件的代码，还需要配套修改wangEditor的代码

4、最终方案

1. 选用的库：

• @vueup/vue-quill：一款简易的 vue 富文本处理器，基于 quill 实现的（备注：vue-quill-editor 这个库不支持 vue3，故放弃，采用与其用法基本一致的 @vueup/vue-quill）
• quill-mention：基于 quill 实现的 mention 插件，可直接插拔到 @vueup/vue-quill 这个富文本库中

2. 优缺点：

• 优点：
  • 可直接插拔使用，定制化改造时候，无需修改 @vueup/vue-quill 这个富文本库（只需要把 quill-mention 这个插件的源码本地化，做定制化改造即可）
  • 支持一切 @ 自定义操作，可随意 diy 修改
• 缺点：
  • 富文本功能没有 wangEditor 那么强大

3. 实现功能：

• 编辑态和显示态保持一致（富文本的编辑态和显示态，一般需要喂入全局的 css 样式，编辑态和显示态需要套用同样的 css 节点大类）
  

• @@@不触发（与飞书文档保持一致）
  

• 1@、guan@不触发，关@触发（与飞书文档保持一致）
  

• @x，x 必须是数字、字母、汉字、- 这样的字符，才触发（-是为了满足 p-xx 这样的外部同事搜索）； x 为其他字符，如空格的时候，会断开 @ 的搜索（这点飞书没这么做，体验不是很好）
  

• 搜索 Loading 态、搜索空态
  
  

• 其它细节：@abc…uvw输入节流控制等