jQuery UI와 상호 작용하는 동안 contenteditable에서 텍스트 선택 유지 대화 상자 및 텍스트 입력

Question

contentEditable 범위에서 링크를 만들기위한 jQuery 대화 상자가 있습니다. 문제는 버튼을 클릭하여 대화 상자를 열면 선택 항목이 손실되고 대화 상자 내부의 텍스트 입력으로 인해 선택 항목이 손실된다는 것입니다.

버튼을 -moz-user-select : none으로 수정할 수 있습니다. 하지만 -webkit-user-select : 아무 것도 Chrome에서 작동하지 않습니다.

입력을 iframe으로 묶어서 고칠 수는 있지만 지저분하고 다른 곳을 클릭해도 선택 영역이 사라집니다 (예 : 대화 상자를 드래그하는 등).

나는 해결책을 How to preserve text selection when opening a jQuery dialog에 보았지만 contenteditable 요소의 많은 브라우저에서 실제 입력만으로는 작동하지 않습니다.

내 문제에 대한 좋은 해결책이 있습니까?

Answer 1

대화 상자를 열고 닫을 때 다음과 같은 간단한 기능을 사용하여 선택 사항을 저장하고 복원 할 수 있습니다. 대화 상자 열기 및 닫기에 연결하기위한 메커니즘을 알기 위해 jQuery 대화 상자에 익숙하지 않습니다. 우리가 실제로 이러한 기능을 사용하려면 어떻게해야

function saveSelection() { 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      return sel.getRangeAt(0); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     return document.selection.createRange(); 
    } 
    return null; 
} 

function restoreSelection(range) { 
    if (range) { 
     if (window.getSelection) { 
      sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (document.selection && range.select) { 
      range.select(); 
     } 
    } 
}