关于javascript:在可编辑的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

就行了 …