用 GPT 写了一个和编辑器搭边的小需求

工作任务发现有一个细节交互没做，需求是点击某个空白处自动定位到可编辑段落的最后一个字，参考此前写给小窝后台编辑器的经验无效（因为是基于 Textarea 做的），特此请教 GPT 写了一个，基本符合我的需求，只要把点击按钮的逻辑改成对应元素就可以了。

<div id="trigger">点击这里</div>

<p id="editable" contentEditable="true">这是一个可编辑的段落，点击上面的 div 将光标放在这里。</p>

<script>
  document.getElementById('trigger').addEventListener('click', function() {
    var editableElement = document.getElementById('editable');

    // 确保元素是可编辑的
    if (editableElement.isContentEditable) {
      // 将光标放置在最后一个字之后
      var range = document.createRange();
      var sel = window.getSelection();
      range.selectNodeContents(editableElement);
      range.collapse(false); // 将collapse设置为false，以将光标放置在末尾
      sel.removeAllRanges(); // 清除现有的范围
      sel.addRange(range); // 添加新的范围
    }
  });
</script>

这个代码的核心就是这个 createRange 建立一个块选区域，限定在 editableElement 里面然后修改光标位置，替换掉此前选择的块选区域。