【实战】我是如何在输入框实现@ At功能的
作者：InfinityTomorrow 授权转载
链接：https://juejin.cn/post/6982251438332182542
一、前言
最近接手了一个需求，在评论框中实现 @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的原因。(不要问我为什么知道这个问题！！！)。
wangeditor的配置只支持固定高度，如果我们想支持文本框最小高度、文字随内容到最大高度xx时自适应滑动怎么做呢？
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} ` // @的文本信息
spanNodeFirst.dataset.id = id // 用户ID、为后续解析富文本提供
spanNodeFirst.contentEditable = false // 当设置为false时，富文本会把成功文本视为一个节点。
// 需要在字符前插入一个空格否则、在换行与两个@标签连续的时候导致无法删除标签
let spanNode = document.createElement('span');
spanNode.innerHTML = ' ';
//创建一个新的空白的文档片段，拆入对应文本内容
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(`${id}" style="color: #409EFF" contentEditable="false">@${name} `)
}
},
扩展知识：
getSelection()表示用户选择的文本范围或光标的当前位置。Event.returnValue兼容IE取消默认事件
到现在我们的核心功能已经完成了。通过@人的监听事件，通过我们自定义的标签插入，通过getSelection获取到的光标位置。我就就可以做到：随时@ 随时插入的功能拉～
五、Android、IOS、Web显示多端一致
每个端使用富文本都是不一样的、那我们应该如何做到统一数据统一呢？
现在采取的方案是通过解析富文本内容生成评论数组列表。 通过各端解析数组列表、生成富文本... 兼容换行字符... 虽然不能做到完全统一但是能做到数据至少是一致的(现在又觉得、textarea、inpu方案的好了)
/**
* 例 富文本： @小明
喂三点几拉 @饮茶哥 出来饮茶
* 生成数组：
* [
* {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 => {
// 对于换行符号处理 处理
等标签保障显示一致性
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(/(
)|(
return
}
// 如果children 是数组则继续递归遍历下一层
if (Array.isArray(item.children)) {
generateArray(item.children)
return
}
// 如果没有数组了、就是文本的内容
// 删除文本中的
字符
if (item.trim()) {
contents.push({segment: item.replaceAll(/(
)|(
}
})
}
}
generateArray(data)
return contents
}
将生成的数组解析成为富文本
// 生成换行符号
createLineBreaks(str, target) {
let label = []
while(str.match(target)){
str = str.replace(target,'')
label.push('
')
}
return label.join('')
},
// 解析数组内容 生成富文本
createCommentHtml(data) {
// 生成@的标签
const anchorPoint = (id, value) => {
let defaultSpan = ` ${id}" style="color: #409EFF" contentEditable="false">${value}`
// 判断android ios的换行符，替换为富文本的
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, '
}
})
// 清除文本数据
this.resetQuery()
// 生成内容插入到edito中
this.editor.txt.html(`${createHtml.join('')}
`)
},
// 清除文本数据
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>
七、总结
不要放弃探寻、探究问题的本质。不要小看那些看似“无用”的知识、如果这份只是曾经摆在你的面前你没有拒绝它、此时你的学习成本又该降低多少呢？
这个功能只是在开发中挤出来的、很多东西写的不够好、不够完善，希望本文能帮助您在开发中节约一点时间。也欢迎大家提出踊跃的反馈、希望能与大家共进步，加油～
作者：InfinityTomorrow 授权转载 链接：https://juejin.cn/post/6982251438332182542
“分享、点赞、在看” 支持一波👍
评论