JQuery 和 ACE-Editor 不能很好地配合使用

Question

我正在构建一些模块来向我的一些学生教授入门编码概念 http://jsbin.com/pacaxoza/3/edit

当用户编写自己的函数时，我希望在调用时突出显示每一行的编辑器跳转到函数，以便用户在调用时可以看到他们的函数已被读取。所有这些都在上面的 jsbin 中（为清楚起见，基于代码的带有动画的画布不在 jsbin 中）。

在 Javascript 模式下，Ace Editor 使用 class'ace_function' 将任何用户定义的函数包围在一个范围内。我找不到一种简单的方法来查找和存储 ace 方法中用户创建的函数的值，因此我使用 JQuery 来查找每个带有类“ace_function”的跨度。我正在使用 JQuery 索引来查找这些函数所在的行，然后将该信息传递给 ace 方法进行渲染。

问题是如果编辑器滚动到顶部，一切正常，但如果您在编辑器中向下滚动任何内容并点击提交，编辑器的索引似乎被几行代码关闭，一切都崩溃了。

是否有人对解决此问题的更好方法提出建议，或者是什么导致了这种不稳定的行为？

谢谢

Answer 1

Ace 使用虚拟视口并仅为可见线创建 dom 元素，因此无法使用 jquery。
您需要改用 Ace api，session.getLine(number)->string，session.getTokens(number)->[{type, value}, ...]。
tokenIterator 也可能有用，请参阅 https://github.com/ajaxorg/ace/blob/master/lib/ace/edit_session/bracket_match.js#L34 示例