Angular+TypeScript中如何在contenteditable的code标签内添加制表符？

对于contenteditable="true"的元素，无法使用textarea的selectionStart/selectionEnd属性，需要借助浏览器的Selection和Range API来操作光标位置与文本插入。以下是适配你的Angular项目的实现方案：

修改后的TypeScript代码 #

check(event: KeyboardEvent) {
  if (event.key === 'Tab') { // 用标准的key属性替代已废弃的keyCode
    event.preventDefault();
    
    const editor = event.target as HTMLElement;
    const selection = window.getSelection();
    
    if (!selection || selection.rangeCount === 0) return;
    
    const range = selection.getRangeAt(0);
    range.deleteContents(); // 清除选中的文本（若存在）
    
    // 创建制表符文本节点并插入光标位置
    const tabNode = document.createTextNode('\t');
    range.insertNode(tabNode);
    
    // 将光标重置到制表符后方，保证后续输入位置正确
    range.setStartAfter(tabNode);
    range.setEndAfter(tabNode);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

代码说明 #

1. 事件判断优化：使用event.key === 'Tab'替代keyCode，符合现代浏览器的API标准。
2. 选区获取：通过window.getSelection()获取当前光标或选中区域，再通过getRangeAt(0)拿到具体的选区范围对象。
3. 文本插入逻辑：先删除选中内容（若有），再创建制表符文本节点插入到光标位置，最后重置光标到制表符后方。

扩展：多行选中缩进（可选） #

如果需要支持选中多行时自动给每行添加制表符，可以在上述代码基础上扩展：

check(event: KeyboardEvent) {
  if (event.key === 'Tab') {
    event.preventDefault();
    
    const editor = event.target as HTMLElement;
    const selection = window.getSelection();
    
    if (!selection || selection.rangeCount === 0) return;
    
    const range = selection.getRangeAt(0);
    const selectedText = range.toString();
    
    if (selectedText.includes('\n')) {
      // 处理多行选中：给每行开头添加制表符
      const indentedText = selectedText.split('\n').map(line => '\t' + line).join('\n');
      range.deleteContents();
      const textNode = document.createTextNode(indentedText);
      range.insertNode(textNode);
      
      // 光标移到缩进文本末尾
      range.setStartAfter(textNode);
      range.setEndAfter(textNode);
      selection.removeAllRanges();
      selection.addRange(range);
    } else {
      // 单行或无选中：插入单个制表符
      range.deleteContents();
      const tabNode = document.createTextNode('\t');
      range.insertNode(tabNode);
      
      range.setStartAfter(tabNode);
      range.setEndAfter(tabNode);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
}

CSS适配提示 #

确保<pre>和<code>的样式支持制表符正常显示，可添加以下样式：

.preCode .code {
  tab-size: 4; /* 定义制表符显示宽度 */
  white-space: pre; /* 保留空格、制表符和换行 */
}

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