getSelection + anchorOffset selon un parent

Bonjour,
j'ai besoin de votre aide pour trouver la solution à un problème.

Je cherche à trouver comment avoir la position d'une sélection selon un parent. Par exemple lorsque j'utilise un anchorOffset/focusOffset sur un getSelection les positions retourner est calculer selon la balise en cours.
Par exemple, dans le code suivant

Code:

---

<div><p>Texte</p></div>

---

si je sélectionne le mot "Texte" la position est de 0 et 5 (selon les balise <p>) alors que j'aimerais avoir 3 et 8 (position selon <div>).




Merci

Bien compris le problème mais sans le JS ça va être compliqué :)

Mon code Js est très basique.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

var monDiv; function GetSelectedText (balise1, balise2) { if (document.getSelection) { var sel = getSelection (), debutSel, finSel, finTexte, cursor1, cursor2, texteDebut, texteEncour, texteFin; monDiv = document.getElementById('editor'); finTexte = monDiv.innerHTML.length; // cherche la position du dernier caractère cursor1 = sel.anchorOffset; // premier clic de selection cursor2 = sel.focusOffset; // dernier clic de selection if( cursor1 < cursor2){ // on cherche le début de la sélection debutSel = cursor1; finSel = cursor2; } else{ debutSel = cursor2; finSel = cursor1; } // enregistre les portions contenue, selon leur position dépendant de la sélection. texteDebut = monDiv.innerHTML.substring(0, debutSel); texteEncour = monDiv.innerHTML.substring(debutSel, finSel); texteFin = monDiv.innerHTML.substring(finSel, finTexte); // remplace le texte en ajoutant les arguments, balise monDiv.innerHTML = texteDebut + balise1 + texteEncour + balise2 + texteFin; } } // utilise la Dom-2 pour gérer les évenements. var bouton = document.getElementById('bouton'); bouton.addEventListener('click', function() { GetSelectedText("<strong>", "</strong>"); }, false);

---

Je tien à préciser que j'utilise le navigateur Firefox.

Le but premier de ce code est de créer un semblable de traitement de texte. Qui, selon le bouton appuyer, va envoyer différente balises ou textes à ajouter à la sélection.

J'ajoute aussi que, j'ai besoin de trouver la position de la sélection selon un parent pour d'autre script pas seulement pour ce genre de traitement de texte.

Merci :)

Bon la première chose est que je ne connaissais pas getSelection() mais ce que j'ai fait ressemble beaucoup à ta manière de procéder.

Ce que je vais dire maintenant ne découle que d'une pure observation, pour ma part getSelection permet de récupérer le texte sélectionner à l'écran, il y a une certaine référence aux éléments qui contiennent le dit texte mais si tu souhaites parcourir le DOM à partir de la sélection cela risque d'être compliqué.

Je ne dis pas que c'est impossible mais tu devras maîtriser de A à Z l'ensemble des séquences des éléments qui constituent ta page. De plus et j'y pense maintenant j'essaierais de te communiquer un test demain afin de vérifier si il est possible de retracer les éléments dans une séquence de sélection de ce genre:

Code:

---

<p>A <em>partir</em> d'ici ce n'est <strong>que</strong> du texte sélectionné</p>

---

Le but étant de déterminer si on peut reconstruire la sémantique ci dessus à partir de getSelection.

Tu trouveras ici un élément assez intéressant: http://jsfiddle.net/faxzv02s/4/

Si tu sélectionnes toutes la phrase tu n'auras comme résultat que la partie du texte après la balise strong, ceci dit le console.log(selection) révèle pas mal d'information qui pourrait être utile comme le parentElement ou nextSibling...

Il faudra je pense être très rigoureux sur l'utilisation de getSelection pour ton projet, ne serait il pas judicieux d'envisager d'autre solution qui seront peut être plus simple ?

Tu ferais mieux d'utiliser execCommand, ce sera plus simple.

Voir à ce sujet : Rich-Text Editing in Mozilla.

Merci à vous deux, je ne connaissais pas execCommand, mais je crois que j'ai trouver une solution pour remplacer getSelection, utiliser les Range.