在可编辑的div中 插入emoji

我的编辑器差不多长这个样
鼠标放上去那个表情图案显示emoji 表情框

下面是代码

<!--表情按钮-->
<button v-for="(item,key) in emoji" 
    class="emoji-item" 
    :key="key" 
    @click="insertEmoji($event,item)">                    
    {{item.label}}
</button>

<!--输入框-->
<div class="scrollbar"
    ref="textareaRef"
    id="text-area" 
    contenteditable="plaintext-only">
</div>

这个button标签很重要

emoji:[
    {
        index: 58,
        label: '🥴',
    },
    {
        index: 59,
        label: '😵',
    },
]

然后是插入表情的方法

var oDiv = document.getElementById('text-area');
var range = window.getSelection().getRangeAt(0); // 获取光标位置
var node = document.createElement('span'); // 创建节点对象
node.innerHTML = item.label; // 设置节点内容为 emoji 表情
range.insertNode(node); // 将节点插入到光标位置
range.setStartAfter(node); // 将光标移动到节点之后
range.collapse(true); // 合并光标位置
oDiv.focus(); // 让可编辑元素获得焦点

其中关于放emoji表情的那个button标签,为什么说他很重要呢? 一开始我就是用的span标签来放emoji, 然后发现点击表情的时候 emoji 不会被插入到输入框里面,而是会插入到你点击的那个表情后面, 百思不得姐..然后就祭出了万能的chat.哆啦GPT.A梦, 这是她的回答

引用这是因为 button 元素和 span、div 元素在默认情况下是具有不同的行为的。
button 元素是一个表单控件，它默认具有点击事件，并且在被点击时会阻止事件的传播和默认行为（提交表单或刷新页面），因此可以在点击事件处理函数中执行插入 emoji 表情的逻辑，而不会触发默认行为。
而 span 和 div 元素默认不具有点击事件，并且在被点击时不会阻止事件的传播和默认行为。因此，如果在 span 或 div 元素中绑定了点击事件处理函数，并且在其中执行插入 emoji 表情的逻辑，那么就会触发默认行为，例如将 emoji 表情插入到点击的地方，或者选中文本等

因为平时 基本都在使用div,span,下意识就用span 来装行内内容,折腾了许久.. 这次是真开眼了
既然都明白了是默认事件的原因,所以如果你还要使用span或者其他元素的话也很简单了, 在上面方法最后加上

// 阻止默认行为
event.preventDefault();
return false

就行了...