JQuery和ACE-Editor不能很好地融合在一起

时间:2014-05-23 11:52:51

标签: javascript jquery ace-editor

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

当用户编写自己的函数时,我希望编辑器突出显示每一行,因为它在调用时会跳转到该函数,因此用户可以在调用它时看到它们的函数被读取。所有这些都在上面的jsbin中(出于清晰的原因,基于代码的动画画布不在jsbin中)。

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

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

有没有人建议更好的方法来解决这个问题,或者是什么导致了这种不稳定的行为?

由于

1 个答案:

答案 0 :(得分:0)

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