jsTree : 편집 모드에서 탭 이동 하시겠습니까?

Question

현재 Angular 2 프로젝트에서 jsTree 플러그인을 사용하고 있습니다. 모두 잘 작동하지만 지금은 특정 동작을 추가하려고합니다 : 사용자가 노드를 편집하고 탭 키를 누르면 편집중인 노드 바로 아래에 새로운 빈 형제 노드가 자동으로 추가됩니다. 타이핑을 계속하고 키보드 단축키로 Tab 키를 효과적으로 사용하여 동일한 레벨에서 많은 수의 노드를 빠르게 만들 수 있도록 편집 모드를 활성화합니다.

나는 jsTree를 포함하는 높은 수준의 DIV에의 keyup 이벤트 리스너를 추가 시도했다 :

(keyup)="onKeyUp($event)" 

onKeyUp에 기능 : jsTree 편집에 대한

onKeyUp(e: any) { 
    if (e.code === 'Tab' && this.renamingNode) { 
     // pressed tab while renaming subitem, insert new sibling item and start editing 
    } 
} 

마지막으로, (간체) 코드 :

let scope = this; 
$(this.currentTree).jstree().create_node(selectedItem, { 'text': '', 'type': 'value' }, 'last', function callback(e: any) { 
    scope.renamingNode = true; 
    // enable renaming of node 
    $(scope.currentTree).jstree().edit(e, null, function callback(addedNode: any, status: boolean, cancelled: boolean) { 
     scope.renamingNode = false; 
     // code to add addedNode to database using service 
    } 
} 

이것은 의도 한대로 작동하지 않습니다. 디버깅 할 때, 사용자가 노드의 이름을 바꾸면 모든 키가 캡처되지만, 'tab'키 누르기는 어떻게 든 jsTree에 의해 억제 된 것처럼 보입니다. onKeyUp 함수가 트리거되지 않고 대신 기본 jsTree 비헤이비어가 진행되고 노드의 이름을 바꾸고 노드를 선택합니다. 다른 jsTree.edit 콜백 함수 매개 변수 (nodeObject, status, cancelled)도 살펴 보았지만 그 중 아무 것도 유용하지 않은 것 같습니다.

이것은 내 우선 순위에 너무 높지는 않습니다. 더 좋은 점이 있지만, 진정으로 궁금합니다. 어떤 아이디어가 있습니까?

Answer 1

아래와 같이 노드 편집을 시작할 때 나타나는 입력에서 탭 키를 모니터링해야합니다. 또한 데모를 확인하십시오 - Fiddle Demo

$(document).on('keydown', '.jstree-rename-input', function(e){ 

    if (e.keyCode == '9') { 
    var focusedNodeId = $('#jstree').jstree()._data.core.focused, 
      focusedNode = $('#jstree').jstree().get_node('#'+focusedNodeId); 
     newNode = $("#jstree").jstree('create_node', '#'+focusedNodeId); 

     // simulate timeout to ensure new node is in the DOM and is visible 
     // before we start editing it 
     setTimeout(function(){ 
      $("#jstree").jstree('edit', newNode); 
     }, 0); 
    } 

})