这是我参与新手入门的第2篇文章

一、前言

最近接手了一个需求，在评论框中实现 @At通知人的功能。这个可以说是我的知识盲点了，但是其实很多应用都有这类功能了，但是一看不想做?(产品经理ps：为什么别人可以你不可以？)。例如：QQ空间、微博搜索、企业微信的TAPD。本文仅做为记录开发中一些思考与踩坑、文中的封装也是有挺多缺陷的，望大家海涵～ 嘻嘻～

二、明确目标

二、技术方案分析

在寻求我们的技术方案的时候、我们首先要明确我们想要的功能是什么

你知道自己想要什么，知道要去哪儿、当我们把需求、功能、拆解的很细的时候可以节约我们走弯路的时间(ps:不要问我怎么知道的)

当前需求的拆解

1. 按住shift + @ 的时候，弹出通知人列表
2. 选择时 @的用户标签插入当前的光标位置中
3. 生成@的用户标签的规则是：高亮、携带用户ID、一键删除信息、不可以编辑。
4. 文本框要随内容自适应高度
5. 可重名、Android、IOS、Web显示多端一致。
6. 具有扩张性，未来评论可能插入图片文件等….

市面流行方案对比

ps: 方案有很多种方式、适合自己、适合团队的才是最佳实践。没有完美的方案(ps:只有不听话的产品经理???)

1. textarea、input (例：新浪微博)
   • 流程大概都是(监听keyup, 获取光标位置拆入@的节点…), 但是…相信我你不会快乐的！！！所以推荐下面的库给大家、只要稍作改动就可以使用啦～～
   • Tribute.js(推荐, ES6)
   • At.js JQ)
2. contenteditable (例：QQ空间, 掘金)
   • HTML5新属性规定元素内容是否可编辑、可以做为编辑器使用，由于时间原因并没有深入体会、感兴趣的小伙伴可以看一下以下内容
   • contenteditable-MDN
   • contenteditable实现编辑器,光标、输入法处理
   • 基于contenteditable技术实现@选人功能
3. 富文本 (例：企业微信TAPD）
   • 支持 文本、富文本、拥有丰富的配置与强大的API。
   • 因为考虑到扩展性与踩坑的深浅、api的丰富程度最终wangeditor富文本编辑器做为最终的方案。

既然选择好了方向、那就开冲吧、冲冲冲！！！

三、准备工作

本功能是基于wangeditor富文本编辑器来实现的，本文wangeditor版本4.3.0

npm i wangeditor --save
复制代码

初始化一下项项目结构～

<template>
    <div ref="editor" class="comment-input-editor" @keydown="onKeyDownInput($event)"></div>
</template>

<script>
import E from 'wangeditor'
export default {
    data() {
        return {
            editor: ''
        }
    },
    mounted() {
        this.initEditor() // 初始化编辑器
    },
    methods: {
        initEditor() {
            let editor = new E(this.$refs.editor)
            editor.config.placeholder = '写评论~可手动输入@通知其他人'
            editor.config.menus = [] // 显示菜单按钮
            editor.config.showFullScreen = false // 不显示全屏按钮
            editor.config.pasteIgnoreImg = true // 如果复制的内容有图片又有文字，则只粘贴文字，不粘贴图片。
            editor.config.height = '100'
            editor.config.focus = false  // 取消自动 focus
            editor.create()
            this.editor = editor
        }
    },
    beforeDestroy() {
        // 销毁编辑器
        this.editor.destroy()
        this.editor = null
    }
}
</script>
复制代码

拓展知识：

1. 为什么在上文中使用 ”new E(this.$refs.editor)“ 使用ref的方式而不是ID的方式呢？

• 使用ref的好处是具有良好的可重用性和范围。因为ref只留在这个组件中，所以当您操作这个ref时，它不会干扰其他组件。

• 如果您使用id，它就有重复的问题，这就意味着你不可能重用某个元素。

• 例：我再生成一个富文本组件就会初始化失败、因为id是唯一的。这就是为什么很多人推荐尽量少用ID的原因。(不要问我为什么知道这个问题！！！)。

2. wangeditor的配置只支持固定高度，如果我们想支持最小高度、最大高度，滚动滑动怎么办呢？

// 先给一个高度 ps：其实改样式也是可以的但是懒的找了
 editor.config.height = '100'
 
<style lang="scss" scoped>
::v-deep .w-e-text-container {
    min-height: 100px;
    max-height: 300px;
    height: auto !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 4px;
    overflow-y: auto;
}
</style>
复制代码

四、@的功能的实现

1. 按住shift + @ 的时候，弹出通知人列表
   • 通过$event 可以获取键盘的keyCode 达到监听的目的
   • e.preventDefault 是阻止我输入的@字符的默认事件
   • getSelection 可以获取光标的位置、给插入标签一个坐标。

// editor keydown触发事件
onKeyDownInput(e) {
    // 中文输入法的时候@的code是 229 英文code是 50， 判断是否按住shift + @键
    if ((e.keyCode === 229 || e.keyCode === 50) && e.shiftKey) {
        e.preventDefault ? e.preventDefault() : (e.returnValue = false)
        // getSelection() 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
        let selection = getSelection()
        this.createInsertElement({
            range: selection.getRangeAt(0),
            selection: selection
        })
    }
}

createInsertElement(position = {}) {
    // 获取插入符号位置
    this.position = position
    
    // 这个富文本 默认有点坑格式是 <p><br/></p>, 故通过这个删除<br>
    // 可以通过初始化html、this.editor.txt.clear()等方式清除
    const data = this.editor.$textElem.elems[0].firstChild
    if (data.firstChild && data.firstChild.tagName === 'BR') {
        data.removeChild(data.firstChild)
    }
   
    // 打开弹窗的方法xxxx，这里就省略了
    // this.openXXX..
}
复制代码

说完@的事件的监听、现在我们可以聊聊怎么生成 @的标签了，而且 @的标签又是再怎么一键删除的？

• 生成@的用户标签的规则是：高亮、携带用户ID、一键删除信息、不可以编辑

/**
* 数据结构：
* userList: [{name: '坏女人', uid: 18}, {name: '好男人', uid: 888}]
*/

//弹窗列表 - 选人 - 生成@的内容
createSelectElement(name, id) {
    // 生成span标签-赋予颜色-携带ID。
    let spanNode = document.createElement('span')
    spanNode.style.color = '#409EFF'
    spanNode.innerHTML = `@${name} `
    spanNode.dataset.id = id
    // 将 contentEditable 设置为false后 富文本视为一个节点，就可以做到、一键删除了  ！！！！
    spanNode.contentEditable = false
    // 生成代码片段、然后塞入关标中～～～
    let aggregate = document.createDocumentFragment().appendChild(spanNode)
    range.insertNode(aggregate)
    // 取消当前选区，并把光标定位在原选区的最末尾处
    selection.collapseToEnd()
}
复制代码

扩展知识：

1. getSelection() 表示用户选择的文本范围或光标的当前位置。
2. Event.returnValue 兼容IE取消默认事件

小结：

到现在我们的核心功能已经完成了。通过@人的监听事件，通过我们自定义的标签插入，通过getSelection获取到的光标位置。我就就可以做到：随时@ 随时插入的功能拉～

五、业务思考：Android、IOS、Web显示多端一致

每个端使用富文本都是不一样的、那我们应该如何做到统一数据统一呢？

• 现在采取的方案是通过解析富文本内容生成评论数组列表。
• 通过各端解析数组列表、生成富文本…
• 虽然不能做到完全统一但是能做到数据至少是一致的(现在又觉得、textarea、inpu方案的好了)

/**
* 例： <p><span data-id="idxxx">@小明</span> 喂三点几拉 <span data-id="idxxx">@饮茶哥</span> 出来饮茶
* [
*    {segment: '@小明', userId: 'idxxxxx'},
*    {segment: '喂三点几拉', userId: null},
*    {segment: '@饮茶哥', userId: 'idxxxx'},
*    {segment: '出来饮茶', userId: null}
* ]
*/

// 解析编辑器富文本 生成文本信息数组
fetchGenerateContentsArray() {
    const data = this.editor.txt.getJSON()
    let contents = []
    // 解析html列表JSON，生成文本对象。
    const generateArray = nodeList => {
        if (Array.isArray(nodeList)) {
            nodeList.forEach(item => {
                //  如果遍历的属性是 data-id
                if (item && item.attrs && item.attrs.find(e => e.name === 'data-id')) {
                    const id = item.attrs.find(e => e.name === 'data-id').value
                    const content = item.children && item.children[0]
                    contents.push({ segment: content, userId: id })
                    return
                }
                // 如果children 是数组则继续递归遍历下一层
                if (Array.isArray(item.children)) {
                    generateArray(item.children)
                    return
                }
                // 如果没有数组了、就是文本的内容
                contents.push({segment: item, userId: null})
            })
        }
    }
    generateArray(data)
    return contents
}
复制代码

生成的数组解析成为富文本

createCommentHtml(data) {
    // @的标签
    const anchorPoint = (id, value) => {
        return `<span data-id="${id}" style="color: #409EFF" contentEditable="false">${value}</span>`
    }
    const createHtml = []
    // 遍历数组生成<p>xxxx</p>
    data.forEach(item => {
        let defaultJson = item.segment
        // 如果有id用 锚点样式
        if (item.userId) {
            defaultJson = anchorPoint(item.userId, item.segment)
        }
        createHtml.push(defaultJson)
    })
    this.editor.txt.html(`<p>${createHtml.join('')}</p>`)
},
复制代码

六. 光标的坐标获取

caret-pos
从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量

import { position, offset } from 'caret-pos'
// 获取当前光标位置
getPosition () {
  const ele = this.editor.$textElem.elems[0]
  const pos = position(ele)
  const off = offset(ele)
  const parentW = ele.offsetWidth
  // 这个是弹窗列表
  const childEle = document.getElementsByClassName("userPopupList")
  const childW = childEle.offsetWidth
  // 弹框偏移超出父元素的宽高
  if (parentW - pos.left < childW) {
    this.left = off.left - childW
  } else {
    this.left = off.left
  }
  this.top = off.top + 20
}
复制代码

<div class="userPopupList" :style="{left: left + 'px', top: top + 'px'}">
    ... you @ popup list
</div>
复制代码

六、总结

不要放弃探寻、探究问题的本质。
不要小看那些看似“无用”的知识、如果这份只是曾经摆在你的面前你没有拒绝它、此时你的学习成本又该降低多少呢？

这个功能只是在开发中挤出来的、很多东西写的不够好、不够完善，希望本文能帮助您在开发中节约一点时间。也欢迎大家提出踊跃的反馈、希望能与大家共进步，加油～