Accueil > Forum > > > > Editeur wysiwyg dans un div
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 di vvar 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 undefinedVoila, Merci d'avance!
|
|
mercredi 10 décembre 2008 à 10:42:32 |
Re : Editeur wysiwyg dans un div

Bul3
|
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
|
|
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
|
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...
|
|
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
|
à 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.
|
|
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
|
>>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
|
|
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
|
|
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
Livres en rapport
|
Derniers Blogs
JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|