Editeur WYSIWYG - Récupérer la sélection d'une DIV

Version imprimable

17/04/2010, 19h45
CactO_o's

Editeur WYSIWYG - Récupérer la sélection d'une DIV

Bonjours à tous !

Je suis en train de faire un éditeur de texte WYSIWYG en JavaScript. J'utilise donc une DIV contenu dans une iFrame.. Mais je n'arrive pas à choper la sélection ?!

Le problème est que plusieurs informations sur la sélection ne fonctionne que sur une textbox (XUL), un input (XHTML) ou un textarea (XHTML) seulement [exemple setSelectionRange() ..].

J'ai donc pas mal regardé à côté et je me rend compte que beaucoup de monde utilise un textarea hidden ... Mais je n'arrive vraiment pas à comprendre comment utiliser ces informations !

Un petit coup de pouce ?

Merci à tous !
18/04/2010, 19h05
hakurou

Salut,

Que veux-tu faire exactement ? Car tu parles de sélection et ensuite de champs caché, je ne comprends pas bien.

Personnellement le champ caché je m'en sers pour récupérer le rendu du wyziwyg par la suite.

Enfin bref, ou en es-tu dessus ?

Alors... Voilà ou j'en suis réelement exactement :

Le HTML

Au chargement de la page j'ai ce code :
Code:

1 2 3 <div class="K_editor" id="idPerso"> Ceci est un code de test, avec des textes en <strong>gras</strong> et dautres en <em>italique</em>. </div>
Ensuite lors d'un événement (chez moi click) le code ce transforme en :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div class="K_editor" id="idPerso"> <div class="K_links"> <div class="K_editor_link K_editor_linkBold">B</div> <div class="K_editor_link K_editor_linkItalic">I</div> <div class="K_editor_link K_editor_linkUnderline">U</div> </div> <iframe width="696" height="212" frameborder="0" src="js/myEditor_iFrame.php"> <html> <head/> <body> <div id="contentIframe" contenteditable="true"> Ceci est un code de test, avec des textes en <strong>gras</strong> et dautres en <em>italique</em>. </div> </body> </html> </iframe> <input type="submit"/> </div>
Le Javascript

Lors du click sur un des ".K_editor_link" une fonction est ouverte avec par exemple comme arguments :
- tagStart (exemple '<u>')
- tagEnd (exemple '</u>')
- id (exemple ici 'idPerso')

Dans ma fonction j'arrive à récupérer en JavaScript l'iFrame et la div "#contentIframe" sans problème.

Le problème

Je voudrais pouvoir ajouter les balises tagStart et tagEnd à la sélection actuel, le problème est que les attribues ".selectionStart", ".selectionEnd" et d'autre utile, ne peuvent s'utiliser que sur une textbox (XUL), un input (XHTML) ou un textarea (XHTML)..

Je cherche donc une solution pour faire la même chose avec une DIV..

J'ai déjà trouver des idées tel que :
- Textarea hidden (ce dont je parlais au message précédent) : j'ai vu que certain éditeur on un textarea mais je ne voix vraiment pas l'utilité de mettre ça en place.. Je n'arrive pas à comprendre comment récupérer la sélection. ? (en absolute par dessus avec opacity : 0 et uniquement le texte copier dedant ??)
- Fonction execCommand() : Permet de mettre des textes en gras, etc.. Mais niveau compatibilité c'est pas super et ne permet pas tout.. (exemple balises perso...)

Voilà, je pense que tout est dit.

19/04/2010, 12h27
hakurou

execCommand te permet déjà les styles de base, c'est ca en moins à gérer, ensuite tu peux faire un switch pour trier tes balises persos des balises gérées par d'execCommand.

Mozilla fournit un bel exemple de fonction d'insertion d'élément:
http://www.mozilla.org/editor/midasdemo/

Tu regarderas la fonction "insertNodeAtSelection" qui te donne tous les outils pour y arriver (j'ai testé ca fonctionne !); par contre il te faudra coder l'équivalent IE de cette implémentation, ca aurait été trop simple que ca fonctionne partout.
19/04/2010, 13h03
CactO_o's

Merci pour ton information, je vais déjà pouvoir avancé pour Mozilla...

Mais du coup je ne sais pas vraiment comment m'en sortir pour avoir quelque chose de compatible au moins IE / Mozilla / Opera / Safari / Chrome.. :s
19/04/2010, 13h32
hakurou

De toute manière rien qu'a la création de l'éditeur même, tu as déjà une DIV d'un coté et une iframe de l'autre donc bon.

Tu n'auras normalement que deux choses IE d'un coté (et les vieux Opera me semble t'il), et les autres navigateurs de l'autre.

Si c'est pour un projet perso, ne te prends pas la tête avec IE pour le moment et concentre sur le reste.
19/04/2010, 14h18
CactO_o's

Ce projet est en effet pour moi, mais IE est une très grande cible... Je ne peux donc pas me limité à ça...

A moins de simplement repoussé le problème à plus tard..