javascript - 光标在 Ace 中是如何工作的

Question

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

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

当您选择文本时，我也对文本突出显示的工作方式很感兴趣（在演示中会变成灰色）

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

提前致谢。

Answer 1

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

为了正确定位所有内容，我首先测量字符的高度和宽度。这也是 Ace 仅适用于单间距字体的原因。

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

Answer 2

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

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

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