当在 contenteditable 区域内嵌套 contenteditable="false" 的图文混合块时，光标从左向右移动至首个不可编辑元素时会意外消失；将这些容器设为 contenteditable="true" 并禁用其编辑能力，可从根本上解决光标中断问题。
当在 `contenteditable` 区域内嵌套 `contenteditable="false"` 的图文混合块时，光标从左向右移动至首个不可编辑元素时会意外消失；将这些容器设为 `contenteditable="true"` 并禁用其编辑能力，可从根本上解决光标中断问题。
在浏览器扩展等无法修改宿主页面 contenteditable 属性的受限场景下，开发者常需向第三方聊天输入框（如 Discord、Twitch 聊天）注入自定义表情（emoji/emote）组件。典型实现是使用 包裹 与隐藏文本（用于无障碍和复制语义），但该方案存在严重的光标导航缺陷：光标可正常从右向左穿越不可编辑区域，却在从左向右移动时于首个 contenteditable="false" 元素处“消失”或跳转失效——这是因为浏览器对 contenteditable="false" 子节点的光标锚点支持不一致，尤其在行末边界处缺乏有效的插入点（
或空白文本节点）。
✅ 正确解法并非添加伪元素、空格或 （易破坏排版且无法保证光标停靠），而是将外层容器设为 contenteditable="true"，同时通过 JavaScript 主动拦截编辑行为，兼顾光标连续性与内容只读性：
<div class="editor" contenteditable="true">
text
<span class="emote-wrapper" contenteditable="true" data-emote="DogePls">
<span class="emote-label" aria-hidden="true">DogePls</span>
<img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp">
</span>
<span class="emote-wrapper" contenteditable="true" data-emote="DogePls">
<span class="emote-label" aria-hidden="true">DogePls</span>
<img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp">
</span>
</div>.emote-wrapper {
display: inline-block;
user-select: none; /* 防止误选 */
vertical-align: middle;
}
.emote-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}// 在扩展脚本中全局绑定（需确保 DOM 加载完成）
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.emote-wrapper').forEach(wrapper => {
// 禁用键盘输入与粘贴
wrapper.addEventListener('keydown', e => e.preventDefault());
wrapper.addEventListener('paste', e => e.preventDefault());
// 可选：禁用鼠标双击选中（避免触发编辑态）
wrapper.addEventListener('dblclick', e => e.preventDefault());
// 保持光标可进入但不可修改内容
wrapper.setAttribute('spellcheck', 'false');
});
});⚠️ 关键注意事项：
- 不要使用 contenteditable="false" + user-select: none 组合——它无法提供可靠的光标锚点；
- 避免依赖 :after { content: " " } 或零宽空格（）等 hack，它们在不同浏览器/缩放比例下表现不稳定；
- 为保障可访问性，隐藏文本应保留在 DOM 中（如 .emote-label），并设置 aria-hidden="true" 避免屏幕阅读器重复播报；
- 若需支持删除整块表情，可监听 Backspace/Delete 键并结合 window.getSelection() 判断光标是否紧邻该元素，再执行移除逻辑。
此方案在 Chrome、Firefox、Edge 中均验证有效，既满足浏览器扩展的沙箱限制，又完全兼容原生 contenteditable 的光标导航模型，是当前最健壮、语义清晰的修复路径。
