Question

我正在尝试根据keydown操作坐在Ace Editor中的标记之上采取一些操作。

但是，看起来我无法使用简单的jquery连接来捕获标记上的事件。

我宣布我的标记是这样的：

var marker =session.addMarker(range, "misspelled", "typo", true);

然后尝试连接这样的事件：

$(document).on('keydown',".misspelled",
     function (e) {
            //if (e.keyCode == 93)
            alert('show popup here');               
        });

无论我做什么，我都无法在标记元素上触发事件。

我在这里设置了一个jsbin示例： http://jsbin.com/xowaledobi/5/edit?html,output

并点击一下即可让您更轻松地玩游戏。点击标记时 - 没有任何反应。看看DOM，我可以看到标记和我的自定义样式：

基于选择该节点看起来它可以通过UI访问，但我似乎无法触发它上面的任何事件。点击或点击都不会导致任何事情发生。

那么 - 在Ace Editor标记中捕获关键事件的最佳方法是什么？

PS 在应用程序的另一部分，我使用右键单击弹出处理程序，在那里我使用相当昂贵的代码，将标记ID和位置映射到当前鼠标位置。它适用于鼠标操作，但对键盘操作来说太慢了。

Answer 1

你不能使用jquery在编辑器中使用dom元素，你需要使用这样的编辑器api：

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #e1 { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 50%;
        left: 0;
    } 
  .misspelled {
    border-bottom: 1px dashed red;
    position: absolute;
  }
</style>
</head>
<body>
  tfa
<div id="e1">&lt;xml>
  function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
  }
&lt;/xml></div>
<pre id="e2">
second editor
</pre>

<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script> 
<script>
    var Range = ace.require("ace/range").Range
    var editor = ace.edit("e1");
    editor.session.setMode("ace/mode/javascript");
    editor.session.addMarker(new Range(1,0,1,20),"misspelled","fullLine",true);

    editor.on("click", function(e) { 
      if (e.getDocumentPosition().row == 1)
         alert('clicked'); 
    });
    
</script>
</body>
</html>

Ace编辑器处理标记事件

1 个答案: