如何在Reddit类网站的可编辑span元素中插入Unicode字符？

你原来的代码只适用于传统的input/textarea表单控件，但Reddit的评论编辑器是**contenteditable="true"的div元素**（基于Lexical编辑器），这类元素不支持.val()方法，也没有selectionStart属性，必须用浏览器的Selection和Range API来处理文本插入。

修改后的完整代码 #

$(document).keydown(function(event) {  
  // 监听Alt+Shift+0组合键
  if (event.key === '0' && event.altKey && event.shiftKey) {
    insertTextAtCursor("Œ");
    event.preventDefault(); // 阻止默认按键行为，避免输入多余字符
    return false;
  }
});

function insertTextAtCursor(text) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  // 获取当前光标/选区范围
  const range = selection.getRangeAt(0);
  range.deleteContents(); // 清除选中的内容（如果有）
  
  // 创建文本节点并插入到光标位置
  const textNode = document.createTextNode(text);
  range.insertNode(textNode);
  
  // 将光标移动到插入文本的末尾，保证后续输入连续
  range.setStartAfter(textNode);
  range.setEndAfter(textNode);
  selection.removeAllRanges();
  selection.addRange(range);
}

额外优化：仅在Reddit编辑器中生效 #

如果想限制快捷键只在评论编辑器内触发，可以给函数增加校验逻辑：

function insertTextAtCursor(text) {
  const activeEl = document.activeElement;
  // 检查当前激活元素是否是Reddit的Lexical编辑器
  if (!activeEl || !activeEl.hasAttribute('data-lexical-editor')) return;

  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  range.deleteContents();
  
  const textNode = document.createTextNode(text);
  range.insertNode(textNode);
  
  range.setStartAfter(textNode);
  range.setEndAfter(textNode);
  selection.removeAllRanges();
  selection.addRange(range);
}

关键说明 #

1. 用event.key === '0'替代event.which，更符合现代浏览器标准，可读性更强。
2. 必须调用event.preventDefault()，否则Alt+Shift+0会触发浏览器默认行为，导致插入额外字符。
3. 通过Selection和Range API直接操作DOM，适配所有contenteditable类型的富文本编辑器，包括Reddit的Lexical编辑器。

内容的提问来源于stack exchange，提问作者MikeWrx