Editeur wysiwyg dans un divRésolu

Question

Bonjour, je suis en train d'essayer de réaliser un éditeur wysiwyg.
Pour l'instant je m'intéresse seulement à firefox, je verrai plus tard pour IE.

J'ai décidé d'utiliser un div éditable. pour la zone de texte éditable.

Voici mon problème : 
Je voudrai pourvoir récupérer la sélection faite dans le div. Par exemple si un utilisateur tape un texte puis le sélectionne avant de cliquer sur "mettre en gras".

Pour cela, je souhaiterai récupérer la longueur de texte, le début de ma sélection et la fin de ma selection.

j'ai fait la manip suivante:

var textarea = document.getElementById("texte"); //ca fonctionne        

var selLength = textarea.innerHTML.length; //la longueur de texte dans mon div
alert(selLength);//Affiche bien la longueur de texte dans le d
iv
var selStart = textarea.innerHTML.selectionStart;//Je veu la position du début de ma selection
alert(selStart);//Affiche undefined
var selEnd = textarea.innerHTML.selectionEnd; //Je veu la position de fin de ma selection
alert(selEnd);//Affiche undefined

Voila, 
Merci d'avance!

Bul3 · Accepted Answer

>>Par contre, l'image s'affiche a 100%..
ah ben oui...

>>.et elle n'a pas d'attribut id ni
name, 
c'est sûr

>>je me demande comment la redimensionner en javascript.
rien n'empêche d'intervenir dans l'iframe ( avec le DOM ) 
en javascript... ce n'est plus un souci "wysiwyg" 
je dirais même qu' "il ne faudrait pas"

          [mon Site] [M'écrire] Bul

Bul3 · Answer

bonjour,

>>je m'intéresse seulement à firefox, je verrai plus tard pour IE.
>>J'ai décidé d'utiliser un div éditable.
t'as pas de bol, je crois qu'un div contenteditable est exclusif IE

il faut utiliser un iframe pour FF ( ça marchera aussi avec IE )

et pour le selectionStart ou End, 1° c'est sur l'élément ( textarea.selectionStart )
( pas sûr d'ailleurs pour un textarea qu'il faille utiliser innerHTML, 
  .value est peut-être plus indiqué )

si tu veux un exemple ( compatible tous navigateurs, c'est ici )

Cordialement

          [mon Site] [M'écrire] Bul

picolo220 · Answer

Désolé pour le temps de réponse mais j'ai été pas mal occupé!
merci pour ta réponse, bul3, ça m'a beaucoup aidé.
J'ai une question encore, j'utilise désormais une iframe dans laquelle je fais des modification grâce à execCommand().

Cela fonctionne bien sauf pour l'insertion d"image. je peut insérer une image mais la source ne semble pas être correcte. On ne peut pas voir l'image dans l'iframe, on a juste un cadre sans images dedans...
Je me dit que c'est du au fait que l'iframe n'a pas de src et donc l'adresse de l'image ne fonctionne pas. J'ai donc mis une source a mon iframe, et j'ai mis une image dans la source, et la ça fonctionne.

Ma question : puis-je insérer mon image dans mon iframe sans mettre de source a mon iframe?
Comme dans la plupart des éditeur que j'ai pu voir

Merci d'avance

Bul3 · Answer

le src de l'iframe serait l'url d'une page html à charger....
ça n'a rien à voir avec le src d'une image, contenue ou pas dans cet iframe

si tu regardes dans mon exemple, j'ai mis ( en commentaires ) :
    réservé à Internet Explorer ?
    pas réussi à faire fonctionner avec Mozilla, par exemple
et, là, par hasard, il y a cette "gestion" d'images !
je ne dis pas que ça ne fonctionne pas : sous IE aucun souci,
mais je n'ai pas réussi à faire avec FF, 
sûrement parce je t'avoue n'avoir pas creusé outre mesure à l'époque...

          [mon Site] [M'écrire] Bul

picolo220 · Answer

Dsl pour la confusion entre les src,

Je reprend, 
J'ai fait un test en mettant une page dans le src de l'iframe, et cette page contenait une image (avec un src elle aussi lol).
Dans cette configuration, l'image est visible dans l'iframe, mais la commande execCommand('insertimage',false,'imagePath'); ne donne rien.

Deuxième configuration : mon iframe n'a pas d'attribut src et j'essaye de lui inserer un image avec execCommand('insertimage',false,'imagePath');
Cette fois ci, un cadre s'affiche dans mon iframe, mais ne contient pas mon image, pourtant j'ai vérifié dans le code source, l'adresse de l'image est la bonne.

Je me demande donc si le fait que mon iframe ne possede pas de src, peut l'empecher de trouver mon image...!

voila donc si quelqun voit ce que je veut faire, qu'il m'aide !

Bul3 · Answer

à mon avis, ça vient plutôt de l'excecCommand pour une image avec FF
   tel qu'on le fait ( mauvais paramètres.. ou autres )
tu peux essayer avec un iframe qui a un src.
          [mon Site] [M'écrire] Bul

picolo220 · Answer

Merci encore pour tes réponses rapides, (pas comme moi lol).
D'après ce site, ça devrai marcher 
http://www.quirksmode.org/dom/execCommand.html
Enfin tout du moins pour firefox 2 je ne sais pas pour le 3..

Quelle galère tout de même ces incompatibilitées, c'est pas la joie.

picolo220 · Answer

J'ai essayé avec une page en src dans mon iframe mais la command execCommand ne fonctionnne plus pour l'insertion d'images...
Je suis bloqué la lol

Bul3 · Answer

>>Quelle galère tout de même ces incompatibilitées, c'est pas la joie.
hélas, 3 fois hélas 
mais c'est vrai pour tous les langages en fait !
>>D'après ce site, ça devrai marcher 
il faut regarder "de près" les paramètres de l'ExecCommand pour une image donné par ce site

         [mon Site] [M'écrire] Bul

picolo220 · Answer

sa y est , ça a fini par fonctionner, j'ai donc placé un src dans mon iframe et dans mon execCommand, le 3eme paramètre qui doit contenir le chemin, j'ai mis le lien relatif en partant du fichier source de mon iframe, c assez clair? lol.
Par contre, l'image s'affiche a 100%...et elle n'a pasd'attribut id ni name, je me demande comment la redimenssioner en javascript.
Merci beaucoup en tout cas

picolo220 · Answer

Merci beaucoup pour ton aide bul3, j'ai tout ce qu'il me fallait.
Pour la taille de l'image, un petit getElementByTagName("img") et le tour était joué!
Salut

Bul3 · Answer

par exemple.
nickel si ça baigne et merci de nous l'avoir dit.
          [mon Site] [M'écrire] Bul

Editeur wysiwyg dans un div

12 réponses

Votre réponse

Discussions similaires