光标在Ace中是如何工作的

在Ace中，我基本上将DOM视为一个绘图API。您所看到的一切都是使用绝对定位的DIV和SPAN元素"绘制"的。使用SPAN绘制文本，线条（例如光标或选择）为DIV等。

为了正确定位所有东西，我首先测量一个字符的高度和宽度。这也是Ace只使用单间距字体的原因。

当您单击Ace内部时，我使用getBoundingClientRect计算鼠标在编辑器内部的相对位置，然后使用测量的字符大小将其转换为字符位置。使用键盘导航也是类似的。

当我检查演示页面并通过点击箭头键移动光标时，光标div的style.left属性在适当的方向上移动了7px。对于向上和向下，它是15px，即用于显示文本的跨度的确切大小。

对于选择，他们使用类名为ace_selection的div，然后将其放置在一个绝对位置。

我建议用chrome或firefox来检查这个演示以更仔细地了解它。你可以看到他们是如何创建新的div的，并在你采取的每一个操作中修改div的属性。