光标如何在Ace中工作

Question

我对Ace的工作方式非常感兴趣。

我很好奇光标是如何通过点击或按箭头键在div / span中的每个字符之间移动。

我也对你选择它时文本的突出显示如何起作用感到好奇（在demo中变成灰色的那种）

如果有人能够对这些问题有所了解，我将不胜感激。

提前致谢。

Answer 1

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

要正确定位所有内容，我首先要确定角色的高度和宽度。这也是Ace只使用单声道间距字体的原因。

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

Answer 2

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

对于选择，他们使用的是具有类名ace_selection的div，然后以绝对位置放置。

我建议使用chrome或firefox检查演示，以便仔细查看它。您可以看到他们如何创建新div并使用您执行的每个操作修改div的属性。