Positionner le caret dans un contenteditable

Citation:

---

Envoyé par xess91

Oui bovino tu as raison et c'est cela qui est bien, mais la particularité du script Aloha est qu'il exploite cette possibilité dans le cadre d'un wysiwyg qui fournit des fonctionnalités d'éditions de base et je présume sans iframe.

---

Oui, j'ai bien vu cela ;)
La seule chose que je voulais te montrer, c'est que la position du curseur dépend du clic de l'utilisateur, pas du script, qui lui se charge de tout l'aspect modification et styles.
Mais c'est vrai qu'ayant déjà eu à faire une appli de ce genre (à base de contenteditable), j'avoue que leur résultat est pas mal, car le plus compliqué avec contenteditable est la gestion complexe liée aux inconsistances des navigateurs ! Ce qui explique d'ailleurs probablement le peu d'options au final de leur script.
Dans mon cas, j'avais géré beaucoup plus de type de balises (jusqu'à l'insertion d'images éventuellement à uploader) mais le résultat, bien que valide sur tous les navigateurs, ne respectait pas la même logique pour chacun (pas la même gestion du comportement s'il n'y a pas de sélection, gestion calamiteuse des styles et des suppressions de formatage, j'en passe).

Moi aussi le problème que je rencontre survient lors d'insertion d'images, de liens et de couleurs(palette de couleur javascript) dans un bloc type sous-menu div qui réclame les informations à l'utilisateur sans utiliser prompt et dans ce cas le contenteditable perd le focus et la sélection.

Il me faut donc en recréer une et repositionner le caret au bon endroit, pas facile tout ça!

Ah oui, effectivement, je me souviens avoir eu à régler ce problème effectivement !
En réalité, la solution est plus simple que tu ne crois :)
La problématique : lorsque tu cliques sur la partie éditable, cela positionne le curseur, mais lorsque tu cliques sur un bouton, tu perds la position et la sélection.
La solution : en fait, la perte de focus se fait sur l'événement onclick, il faut donc utiliser onmousedown pour gérer les modifications et retoutner false : comme ça, tu n'as plus de perte de focus ;)
Pour ce qui est des images, c'est le même principe, sauf que si tu ouvres une fenêtre (soit pour proposer parmi les images existantes ou pour un input file) et que tu fais un choix, alors pareil : perte de focus sur la partie éditable. La solution est de passer par showModalDialog() qui a le même effet qu'un message de type alert().

Oui mais showModalDialog() ne m'intéresse pas car le style n'est pas personnalisable et c'est bien trop contraignant en terme d'ergonomie(je ne parle pas de la conception)...

A l'heure du web 2.0 et de l'html5 les popups type fenêtre sont obsolètes.

Il me semble aussi que sur des boutons comme ceci il n'y a pas de perte de focus:

Code:

---

1 2	<button onclick="catchSelection()">Gras</button>

---

Parcontre c'est vrai que pour des boutons de ce type il y a perte de focus donc obligé de mettre la fonction sur un évènement onmousedown:

Code:

---

1 2	<span onmousedown="catchSelection()">Gras</span>

---