javascript - 光标在 Ace 中如何工作

Question

我对如何 Ace 很感兴趣作品。

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

我也对当您选择它时文本上的突出显示如何工作很感兴趣(在 demo 中有点变成灰色)

如果有人能阐明这些问题，我们将不胜感激。

提前致谢。

Answer 1

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

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

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