[Résolu] Selection du noeud le + proche de la sélection

Miky76

4 Feb 2011 à 17:12

Bonjour,

J'ai un IFrame avec ContentEditable = true, je souhaiterai que le range de selection soit toujours sur un node enfant de mon document.body, et que ce node soit un <p>, un <h1> ou un <h2>. Mon souci est que la selection se retrouve parfois sur le body, entre 2 node <p> par exemple...

Il faudrait que je trouve un moyen de déplacer le curseur d'insertion sur le node le plus proche de mon range de sélection... Pour illustrer :


<body>
<h1>Mon titre</h1>
<p><br /></p>
<p>Mon texte</p>
</body>

Mon range de sélection, dans le cas de figure ci dessus, se retrouve entre le </h1> et le <p>... Si j'observe mon range.startContainer, c'est le body, avec un offset de 1...

Comment faire en JS pour que mon range de selection se retrouve entre <p> et <br /> ?

Je suis dessus depuis plusieurs jours, je n'ai presque plus de cheveux sur la tête, toute suggestion est la bienvenue !
Modifié par Miky76 (04 Feb 2011 - 19:23)

Miky76

4 Feb 2011 à 19:22

Il m'aura fallut poster ici pour que la réponse me vienne... Après avoir épluché les docs MDN j'ai trouvé la merveilleuse fonction range.comparePoint(), j'ai donc fait comme ceci pour trouver ce fameux noeud :


var nodeSelect = null;
for (var cptNode = 0; cptNode < this.TAdoc.body.childNodes.length; cptNode++) {
	var node = this.TAdoc.body.childNodes[cptNode];
	if (node.nodeType == 1 && range.comparePoint(node, 0) == 1 && node.tagName.toLowerCase() != 'body') { 
		nodeSelect = node; 
		break; 
	}
}
if (nodeSelect && nodeSelect.firstChild) { 
	range.selectNode(nodeSelect.firstChild); 
	range.collapse(true); 
}

this.TAdoc pointe sur l'objet document d'une IFrame contentEditable à true.

Voilà si cela peut servir...

A+