在输入框实现@ At功能的一些思考

·  阅读 1058
在输入框实现@ At功能的一些思考

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

一、前言

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

二、明确目标

2021-07-07_21-47-15 (1).gif

二、技术方案分析

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

你知道自己想要什么,知道要去哪儿、当我们把需求、功能、拆解的很细的时候可以节约我们走弯路的时间(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空间, 掘金)
  3. 富文本 (例:企业微信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>
复制代码

拓展知识:

1. 为什么在上文中使用 ”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 事件将被触发。利用这个机制我们就可以判断是否中文状态了

<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>`)
    }
},
复制代码

扩展知识:

  1. getSelection() 表示用户选择的文本范围或光标的当前位置。
  2. 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>
复制代码

七、总结

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

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

分类:
前端
标签:
分类:
前端
标签: