Javascript contenteditable div中的奇怪插入符号位置

为什么要双击箭头键在span之间导航？如何修复它

您可以在下面的代码片段中看到它

#可编辑{
填充：4px12px；
边缘顶部：8px；
边框：1px实心#d9d9d9；
边界半径：4px；
大纲：无；
过渡：全部为.3s，高度为0s；
}
#可编辑：悬停{
边框颜色：#40a9ff；
}
#可编辑：焦点{
边框颜色：#40a9ff；
盒影：0.02×rgba（24,144,255,0.2）；
}
.表情符号{
宽度：20px；
高度：20px；
显示：内联块；
背景图像：url（“https://unpkg.com/emoji-datasource-emojione@4.0.2/img/emojione/sheets-256/64.png”）；
背景大小：5200%；
背景位置：27.451%96.0784%；
垂直对齐：中间对齐；
}