光标在 Ace 中是如何工作的答案

【问题标题】：How does the cursor work in Ace光标在 Ace 中是如何工作的
【发布时间】：2011-06-13 22:39:26
【问题描述】：

我对@987654321@ 的工作原理非常感兴趣。

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

我也很感兴趣，当你选择它时，文本上的高亮是如何工作的（在demo 中会变成灰色）

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

提前致谢。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：