web-dev-qa-db-fra.com

window.getSelection () me donne le texte sélectionné, mais je veux le HTML

J'étends un éditeur HTML WYSIWYG (pour Firefox), je veux ajouter des balises autour d'une sélection. Je ne trouve pas de fonction pour accomplir cela dans la spécification Mozilla Midas .

Il existe une commande pour remplacer la sélection par HTML.
Donc, si je pouvais lire le contenu de la sélection, je pourrais ajouter mes balises à cette chaîne.

window.getSelection() fonctionne presque, mais cela me donne nsISelection qui se convertit en une chaîne de texte brut.

PS: document.getSelection() renvoie la chaîne de texte brut même pas un nsISelection.

javascripthtmldomselection
30
Bob Fanger

Jetez un oeil à la DOM Range spec . Vous pouvez obtenir un Range à partir de la sélection des utilisateurs dans Firefox en utilisant:

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

Notez que certains navigateurs, dont Firefox, autorisent plusieurs sélections, accessibles via la méthode getRangeAt() de la sélection.

Range est exprimé en termes de nœuds DOM et de décalages au sein de ces nœuds. Une fois que vous avez votre Range, il n'est pas simple de faire exactement ce que vous voulez, car les limites de la plage peuvent être dans différents nœuds à différents niveaux de l'arborescence DOM, donc entourer simplement le contenu de la plage avec une balise est pas toujours possible. Vous pourrez peut-être faire quelque chose comme ce qui suit, même si cela créera un nouvel élément de bloc pour contenir le contenu sélectionné:

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

Une autre alternative, hacky, consiste à utiliser la méthode execCommand() de document pour modifier la sélection (par exemple en la réglant sur une couleur particulière) puis en utilisant document.querySelectorAll Ou un sélecteur bibliothèque pour sélectionner des éléments avec cette couleur, puis leur appliquer un style.

39
Tim Down

La réponse de Tim Down est sur la bonne voie. Cependant, un problème est que extractContents () supprimera la sélection du dom. Vous pouvez utiliser

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

pour obtenir simplement une copie de ce qui est sélectionné. Vous pouvez ensuite envelopper cela avec votre nouvelle balise, puis remplacer la sélection par elle. La préoccupation de Tim Down concernant la plage couvrant plusieurs éléments HTML est certainement valable. Je pense qu'une fois que vous obtenez la plage, cela "corrige" le code HTML, mais lorsque vous la remettez en place, cela pourrait causer des problèmes. Ici est une bonne ressource sur l'objet Range.

13
rosscj2533

window.getSelection () renverra un objet. Vous pouvez utiliser l'objet de sélection renvoyé en tant que chaîne en appelant la méthode objets .toString ().

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

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

3
Dave Roma