Ace 编辑器处理标记事件答案

【问题标题】：Ace Editor Handle Marker EventsAce 编辑器处理标记事件
【发布时间】：2017-05-16 20:03:06
【问题描述】：

当我坐在 Ace Editor 中基于 keydown 操作的标记顶部时，我正在尝试执行一些操作。

但是，我似乎无法使用简单的 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 访问，但我似乎仍然无法在其上触发任何事件。 click 或 keydown 都不会导致任何事情发生。

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

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

【问题讨论】：

标签： ace-editor

【解决方案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>

【讨论】：

实际上它确实有效，只是不可靠 :-) 问题不在于如何处理事件 - 任何一种方法都适用，问题在于试图抓住处于活动状态的标记并捕获事件在那。 jQuery 或 Editor 事件处理点击和 keydown，只是不在标记上。
e.getDocumentPosition() 允许检查点击是否在标记内