Conservar la selección de texto en contenteditable al interactuar con jQuery UI Diálogo y entrada de texto

Question

Tengo un cuadro de diálogo jQuery para hacer enlaces en un intervalo de contentEditable. El problema es que presionar un botón para abrir el diálogo hace que la selección se pierda, el ingreso de texto dentro del diálogo también hace que la selección se pierda.

Puedo arreglar el botón con -moz-user-select: none; pero -webkit-user-select: ninguno no funciona en Chrome.

Puedo arreglar la entrada envolviéndola en un iframe, pero eso es complicado y hacer clic en cualquier otro lugar también mata la selección, por ejemplo, arrastrando el diálogo.

He visto la solución en How to preserve text selection when opening a jQuery dialog, pero eso no funciona en muchos navegadores en un elemento contento, solo entradas reales.

¿Existe una buena solución para mi problema?

Answer 1

Puede guardar y restaurar la selección usando funciones simples como las siguientes cuando se abre y cierra el cuadro de diálogo. No estoy lo suficientemente familiarizado con los cuadros de diálogo de jQuery para conocer el mecanismo de enganche en el cuadro de diálogo de apertura y cierre. La primera, saveSelection, que devuelve un objeto Range o TextRange que se debe almacenar en una variable que se pasa más tarde a restoreSelection:

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