begin process at 2012 05 29 05:24:09
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Fonctionnement d'une propriété d'un navigateur

 > 

Editeur wysiwyg dans un div


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Editeur wysiwyg dans un div

mardi 9 décembre 2008 à 18:26:37 | Editeur wysiwyg dans un div

picolo220

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.

<div id="texte"
        style="width:500px; height:200px; border:1px solid grey;margin-top:5px;"
        contentEditable="true">
</div>

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!

mercredi 10 décembre 2008 à 10:42:32 | Re : Editeur wysiwyg dans un div

Bul3

Membre Club

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         

vendredi 12 décembre 2008 à 14:40:55 | Re : Editeur wysiwyg dans un div

picolo220

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
vendredi 12 décembre 2008 à 15:00:09 | Re : Editeur wysiwyg dans un div

Bul3

Membre Club

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           

vendredi 12 décembre 2008 à 16:22:38 | Re : Editeur wysiwyg dans un div

picolo220

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 !






vendredi 12 décembre 2008 à 16:39:18 | Re : Editeur wysiwyg dans un div

Bul3

Membre Club
à 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         

vendredi 12 décembre 2008 à 23:02:33 | Re : Editeur wysiwyg dans un div

picolo220

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.
lundi 15 décembre 2008 à 11:40:24 | Re : Editeur wysiwyg dans un div

picolo220

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

lundi 15 décembre 2008 à 12:09:25 | Re : Editeur wysiwyg dans un div

Bul3

Membre Club
>>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         

lundi 15 décembre 2008 à 13:15:05 | Re : Editeur wysiwyg dans un div

picolo220

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

1 2

Cette discussion est classée dans : texte, textarea, div, longueur, wysiwyg


Répondre à ce message

Sujets en rapport avec ce message

Textarea = WYSIWYG éditeur HTML [ par Blasteur ] Bonjour à tous !Je recherche un javascript qui soit intégrable dans un formulaire de la même manière qu'une textarea. Ce script est en fait un éditeur textarea = WYSIWYG éditeur HTML [ par Blasteur ] Bonjour à tous !Je recherche un javascript qui soit intégrable dans un formulaire de la même manière qu'une textarea. Ce script est en fait un éditeur Controle textarea quote [ par gallianofr ] Bonjour je recherche un script contrôlant si j'ai la structure qu'il faut dans un texte. J'ai une textarea ou la secretaire tape un texte puis modifie selection de texte [ par mars666 ] Hello,Je voudrais écrire un code en jvscript qui me permette de sélectionner une partie d'un textarea dans une variable (qui sera par la suite passée Récupérer la valeur d'un calque [ par senechjf ] Bonjour, J'ai un formulaire avec un textaera. Pour avoir un minimum de mise en page, j'ai piqué le javascript de yahoo.fr, lorsqu'on écrit en mail. Je inserer du texte dans n'importe kel textarea [ par ajangot ] est il possible de d'inserer du texte dans n'importe kel textarea car je veux faire un formulaire avec plusieur champs et une barre d'option (comme en texte visible et sélectionné dans textarea [ par bultez ] bonjour à tous.func Ajouter du texte ds un div... [ par maesius ] Bonjour,Voila g fait un petit editeur html WYSIWYG en JS. Le texte de mon editeur est placé ds un DIV.Voici mon pb :J'arrive sur un click bouton à raj Ballises dans un textarea [ par bonjovi51 ] Slt, Je voudrai savoir comment placer des balises HTML, genre ou dans un textarea grâce à des checkbox. Je veux que ce soit comme dans un forum, en wysiwyg pour textarea en css [ par dorian53 ] Bonjour, Je recherche un wysiwyg pour textarea qui édite le code source en css. J'en ai testé une quinzaine (sans source css) sans trouver mon bo


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,250 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales