Angular中如何获取contentEditable Div内光标像素位置并实现@提及定位

要把用户列表精准定位在contentEditable Div内的光标位置，只需将光标相对于视口的坐标转换为相对于Div内容区域的坐标即可，具体实现如下：

1. 获取元素与坐标基础信息
   先通过ViewChild获取目标Div的DOM引用，再分别提取光标和Div的视口坐标：

   @ViewChild('editableDiv') editableDiv!: ElementRef<HTMLDivElement>;
   
   // 光标定位逻辑
   const selection = window.getSelection();
   if (!selection || selection.rangeCount === 0) return;
   
   const range = selection.getRangeAt(0);
   const cursorRect = range.getBoundingClientRect();
   const divRect = this.editableDiv.nativeElement.getBoundingClientRect();
   const divStyle = getComputedStyle(this.editableDiv.nativeElement);
   

2. 计算相对于Div内容区域的偏移量
   结合Div的边框、内边距和滚动偏移，计算光标相对于Div内容区域的水平/垂直位置：

   // 解析Div的边框和内边距数值
   const borderLeft = parseFloat(divStyle.borderLeftWidth);
   const paddingLeft = parseFloat(divStyle.paddingLeft);
   const borderTop = parseFloat(divStyle.borderTopWidth);
   const paddingTop = parseFloat(divStyle.paddingTop);
   
   // 相对水平位置：光标视口left - Div视口left - 边框宽度 - 内边距 + Div横向滚动偏移
   const relativeLeft = cursorRect.left - divRect.left - borderLeft - paddingLeft + this.editableDiv.nativeElement.scrollLeft;
   // 相对垂直位置（按需使用）
   const relativeTop = cursorRect.top - divRect.top - borderTop - paddingTop + this.editableDiv.nativeElement.scrollTop;
   

3. 绑定到用户列表样式
   将计算得到的偏移量直接赋值给用户列表的定位样式：

   <div #editableDiv contenteditable="true" class="editable-div"></div>
   <div class="user-list" [style.left.px]="relativeLeft" [style.top.px]="relativeTop">
     <!-- 用户列表项 -->
   </div>
   

4. 配套样式设置
   确保定位上下文正确，避免列表偏移：

   .editable-div {
     position: relative; /* 作为绝对定位列表的父容器 */
     /* 自定义样式：宽高、内边距等 */
   }
   .user-list {
     position: absolute;
     z-index: 100; /* 确保列表在输入区域上方显示 */
     /* 自定义样式：背景、边框、宽度等 */
   }
   

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