Discussion :

[shawlong]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 <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

[Darkaurora]

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

[shawlong]

Mon code Js est très basique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Darkaurora]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

[Darkaurora]

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 ?

[Bovino]

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

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

[shawlong]

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