Ace 편집기에서 화살표 키와 삭제 작업이 가능하지만 텍스트 입력이 작동하지 않습니다.

Question

Ace 편집기 (http://ace.ajax.org)를 사용하기 시작했는데 바로 일반 편집기에서 정상적으로 작동하지만 jquery-ui 대화 상자 안에 '모달 : 참'옵션이 들어 있습니다. 입력 텍스트를 제외한 모든 작업을 수행 할 수 있습니다. 즉, Ctrl 키 조합을 선택하고 사용할 수 있으며 텍스트를 삭제할 수도 있지만 문자를 삽입 할 수는 없습니다.

'모달 : 참'옵션이 일반 문자 삽입을 방해 할 수 있다고 생각하십니까? 키 스트로크가 에디터에 도달하는 것을 막을 수있는 'stopPropagation'함수가 있습니까?

Answer 1

문제는 jquery 대화 상자가 이벤트를 계속 진행하기 전에 대상 요소 (이 경우에는 Ace 편집기의 텍스트 영역)에서 Z- 색인을 찾습니다. 글을 쓰는 시점에서,이는 그들은이 검사하는 곳 :

jquery.ui.dialog.js 줄에서 시작을 685

create: function(dialog) { 
    if (this.instances.length === 0) { 
    ... 
    setTimeout(function() { 
     // handle $(el).dialog().dialog('close') (see #4065) 
     if ($.ui.dialog.overlay.instances.length) { 
     $(document).bind($.ui.dialog.overlay.events, function(event) { 
      // stop events if the z-index of the target is < the z-index of the overlay 
      // we cannot return true when we don't want to cancel the event (#3523) 


      // HERE's THE CHECK 
      if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ) { 
      return false; 
      } 
     }); 
     } 
    }, 1); 

이이 문제를 처리하는 방법은 여러 가지가 있지만 가장 쉬운 발견 Ace의 텍스트 영역의 z- 인덱스를 매우 높은 값으로 설정하는 것이 었습니다. 여기에 내가이 짓을 CSS의 일부는 다음과 같습니다

ace_uncomplessed.js 내가 jQuery를 함께 CSS를 조정보다는 에이스 소스를 편집하여이를 구현하기 위해 관리 라인 16211.

"\n" + 
".ace_editor textarea {\n" + 
" position: fixed;\n" + 
" z-index: 2000;\n" + 

Answer 2

에서 시작.

$('.ace_editor textarea').css('z-index','2000');