Jul*_*lio 6 html javascript ajax ace-editor
我对Ace的工作方式非常感兴趣.
我很好奇光标是如何通过点击或按箭头键在div/span中的每个字符之间移动的.
我也对你选择它时文本的亮点如何工作很感兴趣(在演示中变成了灰色)
如果有人能够对这些问题有所了解,我将不胜感激.
提前致谢.
Fab*_*obs 15
在Ace中,我基本上将DOM视为绘图API.你看到的一切都是使用绝对定位的DIV和SPAN元素"绘制"的.使用SPAN绘制文本,行(例如光标或选择)是DIV等.
为了正确定位一切,我首先测量一个角色的高度和宽度.这也是Ace只使用单声道间距字体的原因.
当您单击Ace内部时,我使用getBoundingClientRect计算鼠标在编辑器内部的相对位置,然后使用测量的字符大小将其转换为字符位置.使用键盘导航是类似的.
当我检查演示页面并通过按箭头键移动光标时,光标div的style.left属性在适当的方向上移动7px.对于上下15px,用于显示文本的跨度的确切大小.
对于选择,他们使用具有类名ace_selection的div,然后以绝对位置放置.
我建议用chrome或firefox检查演示,以便仔细查看它.您可以看到他们如何创建新div并使用您执行的每个操作修改div的属性.
| 归档时间： |
|
| 查看次数： |
2114 次 |
| 最近记录： |