Ace Editor 마커 이벤트 처리

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');    
     });

을 아무리 내가 뭘 내가 이벤트가에 화재 얻을 수 없다 마커 요소. http://jsbin.com/xowaledobi/5/edit?html,output

와 함께 플레이하기 쉽도록하기 위해 클릭을 사용 :

나는 여기에 jsbin 예를 설정합니다. 마커를 클릭하면 아무 일도 일어나지 않습니다. DOM을 보면 나는 마커 및 내 사용자 지정 스타일을 볼 수 있습니다

그리고는 UI를 통해 액세스 할 수있는 것처럼 보이는 노드를 선택에 따라,하지만 여전히 나는 어떤 이벤트를 발생 수없는 것 그 위에. 클릭이나 keydown은 아무 일도 일어나지 않습니다.

그래서 Ace Editor에서 주요 이벤트를 캡처하는 가장 좋은 방법은 무엇입니까?

ps 응용 프로그램의 다른 부분에서 나는 마우스 오른쪽 버튼 팝업 처리기를 사용합니다. 마커 ID와 위치를 현재 마우스 위치에 매핑하는 값 비싼 코드를 사용하고 있습니다. 그것은 마우스 조작에는 잘 작동하지만 키보드 조작에는 너무 느립니다.

출처

2017-05-16 Rick Strahl

에디터 내부 DOM 요소와 함께 작동하도록 jQuery를 사용할 수 없습니다, 당신은 다음과 같이 편집기 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>

출처

2017-05-16 20:13:39

실제로는 그냥 안정적으로 작업을 수행합니다 -) 문제는 이벤트를 처리하는 방법이 아닙니다. 두 가지 접근 방식 중 하나라도 작동합니다. 문제는 활성 상태 인 마커를 잡고 이벤트를 캡처하는 것입니다. jQuery 또는 Editor 이벤트는 마커가 아닌 클릭 및 keydown을 처리합니다. –

e.getDocumentPosition()은 클릭이 마커 안에 있는지 확인합니다. –

답변

관련 문제