【实战】我是如何在输入框实现@ At功能的 - 哈喽比特

282次阅读 | 发布于2年以前

一、前言

最近接手了一个需求，在评论框中实现 @At通知用户的功能。这个可以说是我的知识盲点了，但是其实很多应用都有这类功能了，例如：QQ空间、微博搜索、企业微信的TAPD...但是一看就不想不做～(产品经理ps：为什么别人可以做你不可以做？)

明确目标

‍

二、技术方案分析

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

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

当前需求的拆解

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

市面流行方案对比

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

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

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

三、准备工作

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

npm i wangeditor --save

初始化一下项项目结构～

<template>
    <div ref="editor"></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
            // 销毁编辑器，定义与销毁应该在同一个地方，增加阅读性，方便后期维护。
            this.$once('hook:beforeDestroy', () => { 
                this.editor.destroy()
                this.editor = null
            })
        }
    }
}
</script>

拓展知识：

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

使用ref的好处是具有良好的可重用性和范围。因为ref只留在这个组件中，所以当您操作这个ref时，它不会干扰其他组件。
如果您使用id，它就有重复的问题，这就意味着你不可能重用某个元素。
例：我再生成一个富文本组件就会初始化失败、因为id是唯一的。这就是为什么很多人推荐尽量少用ID的原因。(不要问我为什么知道这个问题！！！)。

2 . wangeditor的配置只支持固定高度，如果我们想支持文本框最小高度、文字随内容到最大高度xx时自适应滑动怎么做呢？

<!-- 先在配置中给一个高度 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>

四、@的功能的实现

按住shift + @ 的时候，弹出通知人列表

通过$event 可以获取键盘的keyCode 达到监听的目的
e.preventDefault 可以阻止我输入的@字符的默认事件
getSelection 可以获取光标的位置、给插入标签一个坐标。
要兼容中文输入法的时候@的事件判断(如：中文输入法打“哈哈哈@” 这个时候不能监听@的事件 )
中文输入法的时候单独输入@的时

怎么判断中文输入？

当用户使用中文输入法开始输入中文时，compositionstart事件就会被触发。当文中文输入完成或取消时, compositionend 事件将被触发。利用这个机制我们就可以判断是否中文状态了

positionstart 事件,当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。
compositionend 事件, 当文中文输入完成时, compositionend 事件将被触发。

<template>
    <div
        ref="editor"
        @compositionstart="compositionstart"
        @compositionend="compositionend"
        @keydown="onKeyDownInput($event)"
    ></div>
</template>

<script>
export default {
    data() {
        return {
            isChineseInputMethod: false // 是否中文输入法状态中
        }
    },

    methods: {
        // ...code
        // 中文输入触发
        compositionstart() {
            this.isChineseInputMethod = true
        },

        // 中文输入关闭
        compositionend() {
            this.isChineseInputMethod = false
        }
    }
}

记录我们当前的光标位置

<template>
    <div
        ref="editor"
        @keydown="onKeyDownInput($event)"
        @click="onClickEditor"
    ></div>
</template>
<script>
export default {
    data() {
        return {
            position: ''
        }
    },

    methods: {
        // 初始化编辑器
        initEditor() {
            // ... init code
            // 编辑的文本的时候记录光标。
            editor.config.onchange = html => {
                // 生成@的标签的时候会触发渲染、此时不要记录光标坐标
                if (this.isRendering == false) {
                    this.setRecordCoordinates() // 记录坐标
                }
            }
        },

        // 每次点击获取更新坐标
        onClickEditor() {
            this.setRecordCoordinates()
        },

        // keydown触发事件 记录光标
        onKeyDownInput(e) {
            const isCode = ((e.keyCode === 229 && e.key === '@') || (e.keyCode === 229 && e.code === 'Digit2') || e.keyCode === 50) && e.shiftKey
            if (!this.isChineseInputMethod && isCode) {
                this.setRecordCoordinates() // 保存坐标
            }
        },

        // 获取当前光标坐标
        setRecordCoordinates() {
            try {
                // getSelection() 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
                const selection = getSelection()
                this.position = {
                    range: selection.getRangeAt(0),
                    selection: selection
                }
            } catch (error) {
                console.log(error, '光标获取失败了～')
            }
        }
    }
}
</script>

@的功能的监听ps：键盘的@字符

英文code是 50，判断是否按住shift + @键
中文输入法下标点符号keyCode都是一样的：229，推荐使用event.code或event.key作为@的判断。

// editor keydown触发事件
onKeyDownInput(e) {
    // @的键盘时间判断
    const isCode = ((e.keyCode === 229 && e.key === '@') || (e.keyCode === 229 && e.code === 'Digit2') || e.keyCode === 50) && e.shiftKey
    // 判断状态是否不是中文输入法，并且监听到了@的事件
    if (!this.isChineseInputMethod && isCode) {
        // 记录当前文本光标坐标位置
        this.setRecordCoordinates() // 保存坐标
        // 打开弹窗的方法xxxx，这里就省略了
        // this.openXXX..
    }
}

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

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

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

//弹窗列表 - 选人 - 生成@的内容
createSelectElement(name, id, type = 'default') {
    // 获取当前文本光标的位置。
    const { selection, range } = this.position
    // 生成需要显示的内容
    let spanNodeFirst = document.createElement('span')
    spanNodeFirst.style.color = '#409EFF'
    spanNodeFirst.innerHTML = `@${name}&nbsp;` // @的文本信息
    spanNodeFirst.dataset.id = id // 用户ID、为后续解析富文本提供
    spanNodeFirst.contentEditable = false // 当设置为false时，富文本会把成功文本视为一个节点。

    // 需要在字符前插入一个空格否则、在换行与两个@标签连续的时候导致无法删除标签
    let spanNode = document.createElement('span');
    spanNode.innerHTML = '&nbsp;';

    //创建一个新的空白的文档片段，拆入对应文本内容
    let frag = document.createDocumentFragment()
    frag.appendChild(spanNode);
    frag.appendChild(spanNodeFirst);

    // 如果是键盘触发的默认删除面前的@，前文中我们没有阻止@的生成所以要删除@的再插入ps：如果你是数组遍历的请传入type 不然会一直删除你前面的字符。
    if (type === 'default') {
        const textNode = range.startContainer;
        range.setStart(textNode, range.endOffset - 1);
        range.setEnd(textNode, range.endOffset);
        range.deleteContents();
        this.isKeyboard = false // 针对多选的逻辑
    }

    // 判断是否有文本、是否有坐标
    if ((this.editor.txt.text() || type === 'default')&& this.position && range) {
        range.insertNode(frag)
    } else {
        // 如果没有内容一开始就插入数据特别处理
        this.editor.txt.append(`<span data-id="${id}" style="color: #409EFF" contentEditable="false">@${name}&nbsp;</span>`)
    }
},

扩展知识：

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

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

五、Android、IOS、Web显示多端一致

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

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

/**
* 例 富文本： <p><span data-id="idxxx">@小明</span> <br/> 喂三点几拉 <span data-id="idxxx">@饮茶哥</span> 出来饮茶
* 生成数组： 
* [
*    {segment: '@小明 \n', userId: 'idxxxxx'},
*    {segment: '喂三点几拉', userId: null},
*    {segment: '@饮茶哥', userId: 'idxxxx'},
*    {segment: '出来饮茶', userId: null}
* ]
*/

// 解析编辑器富文本 生成文本信息数组
fetchGenerateContentsArray() {
    // 获取编辑器的JSON对象
    const data = this.editor.txt.getJSON()

    let contents = []
    // 解析html列表JSON，生成文本对象。
    const generateArray = nodeList => {
        if (Array.isArray(nodeList)) {
            nodeList.forEach(item => {
                // 对于换行符号处理 处理<br> <p>等标签保障显示一致性
                if (item && item.tag) {
                    // 针对富文本列表是特殊换行处理 {tag:p, children: [{tag: 'br'}]} 这件换行过滤
                    const notSpecialLabel = item.tag == 'p' && item.children[0] && item.children[0].tag == 'br'
                    if (!notSpecialLabel && ['p', 'br'].includes(item.tag) && contents.length) {
                        const index = contents.length - 1
                        // 在文本中拆入换行符号兼容android、ios的换行字符
                        contents[index].segment += '\n' 
                    }
                }

                //  如果遍历的属性是 data-id 有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.replaceAll(/(<br>)|(<br\/>)/g, ''), userId: id })
                    return
                }

                // 如果children 是数组则继续递归遍历下一层
                if (Array.isArray(item.children)) {
                    generateArray(item.children)
                    return
                }

                // 如果没有数组了、就是文本的内容
                // 删除文本中的 <br> 字符
                if (item.trim()) {
                    contents.push({segment: item.replaceAll(/(<br>)|(<br\/>)/g, ''), userId: ''})
                }
            })
        }
    }
    generateArray(data)
    return contents
}

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

// 生成换行符号
createLineBreaks(str, target) {
    let label = []
    while(str.match(target)){
        str = str.replace(target,'')
        label.push('<br/>')
    }
    return label.join('')
},

// 解析数组内容 生成富文本
createCommentHtml(data) {
    // 生成@的标签
    const anchorPoint = (id, value) => {
        let defaultSpan = `<span>&nbsp;</span><span data-id="${id}" style="color: #409EFF" contentEditable="false">${value}</span>`
        // 判断android ios的换行符，替换为富文本的 <br>
        if (/(\r\n)|(\n)/g.test(value)) {
            value.replaceAll(/(\r\n)|(\n)/g, '')
            defaultSpan = defaultSpan + this.createLineBreaks(value, '\n')
        }
        return defaultSpan
    }

    // 将处理的文本放入数组中、通过join生成字符串。
    const createHtml = []
    data && data.forEach(item => {
        // 如果有id用 锚点样式
        if (item.userId) {
            const json = anchorPoint(item.userId, item.segment)
            createHtml.push(json)
        } else {
            createHtml.push(item.segment.replaceAll(/(\r\n)|(\n)/g, '<br />'))
        }
    })
    // 清除文本数据
    this.resetQuery()
    // 生成内容插入到edito中
    this.editor.txt.html(`<p>${createHtml.join('')}</p>`)
},

// 清除文本数据
resetQuery() {
    this.editor.txt.clear()
}

六. 获取光标的坐标在文本中的位置

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>

七、总结

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

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