前端使用 emoji-picker-element 实现表情选择

一些聊天功能的优化, 很多都会加上表情的选择
今天我们就针对这样的优化实现一下
https://github.com/nolanlawson/emoji-picker-element?tab=readme-ov-file
我们先来引入一下
npm install emoji-picker-element
import ’emoji-picker-element’;
或者用cdn进行引入

引入之后, 我们就可以使用emoji-picker标签了


我们现在看看页面什么样子

现在表情选择器就出来了, 随后我们获取这个dom元素并注册emoji-click事件, 我们看看返回了什么

我们点击图标之后, 就可以拿到图标对应的unicode了

随后我们获取textarea元素, 追加一下unicode看看效果
const textarea = document.querySelector(‘textarea’)
document.querySelector(’emoji-picker’)
.addEventListener(’emoji-click’, event => {
console.log(event)
const emoji = event.detail.unicode
textarea.value += emoji
});

我们可以看到, 可以追加了, 但是呢, 我们无法在任意地方添加, 这个怎么处理呢?
我们可以获取当前文本选择的起始位置, 如果没有选择, 就可以获取到光标位置
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/selectionStart
现在, 我们获取起始位置
const startText = textarea.selectionStart
const endText = textarea.selectionEnd
随后我们截取索引为0到开始为止的字符, 再加上unicode最后截取结束为止到最后
textarea.value =
textarea.value.substring(0, startText) +
emoji +
textarea.value.substring(endText)
这样, 我们就将数据插入到光标位置了

这样看貌似功能已经实现了
其实并没有, 我们点击表情之后, 光标就消失了, 我们还需要再点击一下, 这样操作肯定是比较繁琐的
所以, 加完之后, 我们还需要再调用下focus方法, 再次显示光标
textarea.focus()

我们可以看到, 这时候光标跑到最后面了, 如果我们想让光标出现在刚加完表情的后面, 怎么实现?
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setSelectionRange
其实setSelectionRange方法可以设置当前元素选择的起始位置
textarea.setSelectionRange(startText + emoji.length,startText + emoji.length)
这样, 就可以将光标设置到添加完unicode后了

这样我们的功能才算完成了
其实还可以考虑起始位置是否一致, 不一致就可以当做替换来操作
今天我们就讲解到这里
我们下期见