javascript - 知乎div编辑器，@功能的光标定位问题

问题描述

问 题

我今天拜读了一下知乎编辑器的js代码，发现那个@功能其实好像可以分为：

1. 获取@符号的位置

2. 清除@符号

3. 在@符号的位置上将将抓取到的字符串x以@x的形式添加进去

4. 将焦点定位到@X上
   这四个步骤不知道个人理解得对不对，这个用selection.createRange()是怎么实现的呢？不知如何下手写这个功能。

解决方案

你说的是 吗

var range = document.createRange();
range.selectNode(node); // node is where you need the caret to be (with contenteditable)
range.collapse();

var selection = document.getSelection();

selection.removeAllRanges();
selection.addRange(range);

这篇关于javascript - 知乎div编辑器，@功能的光标定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！