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

**CactO_o's** · 17/04/2010, 19h45

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 !

**hakurou** · 18/04/2010, 19h05

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 ?

**CactO_o's** · 19/04/2010, 11h41

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

Le HTML

Au chargement de la page j'ai ce code :

Code :

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

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 :

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

**hakurou** · 19/04/2010, 12h27

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.

**CactO_o's** · 19/04/2010, 13h03

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

**hakurou** · 19/04/2010, 13h32

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.

**CactO_o's** · 19/04/2010, 14h18

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

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

JavaScript

Discussions similaires

Partager

Partager