如何定位光标位置，在光标位置插入数据

Question

问题：如何定位光标位置，在光标位置插入数据
解决方案：

  // 定义光标对象
  const lastEditPosition: any = ref();
  // 获取选定对象
  const selection: any = window.getSelection();
  lastEditPosition.value = selection.getRangeAt(0);
  // 获取光标选取的内容
  const text: any = selection.toString();
  // 创建一个新的节点
  const span = document.createElement('span');
  // 给元素标签添加属性
  span.属性名 = ‘属性值’；
  // 给对应的光标位置插入内容
  span.innerHTML = ‘要插入的内容’；
  lastEditPosition.value.insertNode(span);
  // 移除选定的所有区域
  selection.removeAllRanges();

Answer 1

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/1093918
• 你也可以参考下这篇文章：光标位置设置
• 您还可以看一下 杨振老师的光线追踪入门课程中的 半球光以及光线能量衰减讲解小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 前端组件化埋点方案与实现中的 组件化曝光埋点实现 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  仅向外暴露一个 setRef 用以获取 dom 执行监听工作，其他工作都交给埋点 sdk 来处理，同时支持配置以下曝光规则：

  • threshold： 曝光阈值；
  • visibleTime：组件曝光时长；
  • once：是否进行重复曝光埋点监听。

  // case1: 直接绑定dom
  return (
    <TrackerExposure name='button.exposure' extra={{ data }}>
      {({ setRef }) => <div ref={setRef}>{i + 1}</div>}
    </TrackerExposure>))
  );
  
  // case2: 自定义组件
  const Test = React.forwardRef((props, ref) => (<div ref={ref} style={{
          width: '150px',
          height: '150px',
          border: '1px solid gray'
      }}>TEST</div>)
  )
  
  return (
    <TrackerExposure name="button.exposure" extra={{ data }}>
      {({ setRef }) => <Test ref={setRef} />}
    </TrackerExposure>
  )
  
  /**
  class TrackerExposure {
    constructor(props) {
      super(props);
    }
    setRef() {
  
    }
    render() {
      return this.props.children({ setRef });
    }
  }
  */

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^