window.getSelection() mi dà il testo selezionato, ma voglio l'HTML

Question

Sto estendendo un editor HTML WYSIWYG (per Firefox), voglio aggiungere tag attorno a una selezione. Non riesco a trovare una funzione per ottenere ciò nel Mozilla Midas specification.

C'è un comando per sostituire la selezione con HTML.
Quindi, se potessi leggere il contenuto della selezione, potrei aggiungere i miei tag a questa stringa.

window.getSelection() quasi funziona, ma mi dà nsISelection che converte in una stringa di testo normale.

PS: document.getSelection() restituisce la stringa di testo semplice nemmeno nsISelection.

Answer 1

Dai uno sguardo allo DOM Range spec. È possibile ottenere un Range dalla selezione dell'utente in Firefox utilizzando:

var range = window.getSelection().getRangeAt(0); 

Nota che alcuni browser, tra cui Firefox, consentono a più selezioni, cui si può accedere tramite il metodo della selezione getRangeAt().

Il Range è espresso in termini di nodi DOM e scostamenti all'interno di tali nodi. Una volta ottenuto il valore Range, non è semplice eseguire esattamente ciò che si desidera, poiché i limiti dell'intervallo potrebbero trovarsi in nodi diversi a diversi livelli dell'albero DOM, quindi non è sempre possibile circondare il contenuto dell'intervallo con un tag. Si può essere in grado di fare qualcosa di simile a quanto segue, anche se creerà un nuovo elemento di blocco per contenere il contenuto selezionato:

var range = window.getSelection().getRangeAt(0); 
var selectionContents = range.extractContents(); 
var div = document.createElement("div"); 
div.style.color = "yellow"; 
div.appendChild(selectionContents); 
range.insertNode(div); 

altro, hacky, alternativa è quella di utilizzare il metodo di documentexecCommand() per modificare la selezione (ad esempio impostandolo su un colore particolare) e quindi usando document.querySelectorAll o una libreria di selettori per selezionare gli elementi con quel colore e quindi applicare lo stile ad essi.

Answer 2

La risposta di Tim Down è sulla strada giusta. Tuttavia, un problema è che extractContents() rimuoverà la selezione dalla dom. È possibile utilizzare

window.getSelection().getRangeAt(0).cloneContents(); 

per ottenere solo una copia di ciò che è selezionato. Potresti quindi completarlo con il nuovo tag e quindi sostituire la selezione con esso. La preoccupazione di Tim Down per la gamma che copre più elementi HTML è certamente valida. Penso che una volta ottenuto l'intervallo, si "aggiusta" l'html, ma quando lo si inserisce potrebbe causare problemi. Here è una buona risorsa sull'oggetto Range.

Answer 3

window.getSelection() restituirà un oggetto. È possibile utilizzare l'oggetto di selezione restituito come stringa chiamando il metodo objects .toString().

var selObj = window.getSelection(); 
var selectedText = selObj.toString(); 

https://developer.mozilla.org/en/DOM/window.getSelection