Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MISE EN FORME DE TEXTE [ SAISIE WYSIWYG ]


Information sur la source

Catégorie :Divers Classé sous : éditeur, wysiwyg, texte, richtext, editor Niveau : Débutant Date de création : 08/07/2005 Date de mise à jour : 08/05/2008 12:33:42 Vu / téléchargé: 14 977 / 3 187

Note :
9,42 / 10 - par 12 personnes
9,42 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (66)
Ajouter un commentaire et/ou une note


Description

gras, souligné, italique, couleur caractères
et fond, police, taille, insertions objets ...
testé avec FireFox, Internet Explorer, K-Meleon, Opera, Safari.

 

Conclusion

j'ai vu pas mal de questions sur la mise en forme de texte
dans une page html.
j'avais déjà posté une saisie wysiwyg  mais exclusif
Internet Explorer.
cette version fonctionne avec Mozilla et bien sûr avec
Internet Explorer, cependant  il y a quelques fonctions
que je ne  suis pas parvenu à faire fonctionner avec
Mozilla : erreur de syntaxe de  ma part ( sûrement ! )
ou ça ne marche pas ? si vous savez, dites moi ...
[ Copy,Cut,Paste,CreateLink, tous les Insert??
  comme InsertButton ou InsertImage,
  SaveAs... etc, qui fonctionnent parfaitement bien,
  enfin que je sais faire marcher, avec  Internet Explorer ]

 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

10 juillet 2005 13:00:03 :
_ amélioration du choix des couleurs [ par déplacement d'un curseur ] _ ajout de spécificités d'Internet Explorer [ pas de raison de s'en priver, même si pour l'instant je ne sais les faire marcher qu'avec ce navigateur ]
10 juillet 2005 14:56:17 :
j'avais mis une version de travail et non pas la version provisoirement définitive, qui est définitivement provisoire.
12 juillet 2005 12:53:17 :
quelques petites améliorations.
08 mai 2008 12:33:43 :
amélioration du choix des couleurs

Commentaires et avis

signaler à un administrateur
Commentaire de coucou747 le 09/07/2005 00:52:59

il ne fonctionne pas avec Konqueror, et je n'ai pas réussi à le faire fonctionner avec ce navigateur, comme tu as prévu un switch au lieu d'un if, j'ai pensé que tu attendais les problèmes de compatibilités, je te préviens donc...
navigator.appName="Konqueror"
je n'ai malheureusement pas réussi à trouver un exemple de wysiwyg qui fonctionne avec MSIE, gecko, opera et KHTML...

C'est du bon travail, je te remerci, ça me servira beaucoups...

signaler à un administrateur
Commentaire de bultez le 09/07/2005 09:48:52

salut couco747,
effectivement j'espère des retours
pour les autres navigateurs... et
surtout comment faire avec eux
tout ce qu'on peut faire avec IE.

signaler à un administrateur
Commentaire de RazielReaver le 09/07/2005 13:51:05

Seul point noir pour choisir la couleur... Ca devient assez lourd au Bout d'un moment de trouver unE couleur en mélangeant les RVB et le défilement des composantes RVB et long.

Sinon c vraiment super sympa bravo pour ton travail..

signaler à un administrateur
Commentaire de bultez le 09/07/2005 15:23:51

salut RazielRaever

>>Seul point noir pour choisir la couleur
et je peux comprendre ce point de vue,
c'est la "moins mauvaise" solution
que j'ai trouvé pour être compatible.

avec Internet Explorer j'utilise un
Active'X ( CommonDialog ) et c'est
nickel chrome.

pour "tous navigateurs" , je pensais :
_ autoriser la saisie de valeurs => mais
dans ce cas le texte perd la zone de
sélection ( peut-on éviter cela ? ) et
saisir 3 valeurs ce n'est pas très
"propre" non plus.
_ cliquer sur une couleur dans un tableau =>
soit trop lourd ( 255x255x255 )
soit on n'a pas accès à toutes les couleurs.
_ un mélange de ces 2 solutions
un mini tableau de couleurs + affinage
manuel, je ne trouve pas ça satisfaisant.

donc si vous avez des idées : elles
sont les bienvenues.

signaler à un administrateur
Commentaire de LocalStone le 09/07/2005 17:51:30

Pour les couleurs, tu peux - je pense - assez simplement copier le système de Paint. Tu prends une image qui contient toutes les couleurs, et suivant la position de la souris sur la palette, tu peux en déduire la couleur. Je ne crois pas que ce soit extrèmement compliqué à mettre en place ...
Voilà !
++ !
L.S.

signaler à un administrateur
Commentaire de bultez le 10/07/2005 13:04:43

je viens de rectifier ce choix de couleurs :
par déplacements d'un curseur sur une échelle.
merci de vos commentaires.

signaler à un administrateur
Commentaire de Arto_8000 le 10/07/2005 22:41:26

Il y a quelques bugs dans ton script ,quand on insert un select et que l'on va voir la source le select est en premier plan et cache une partie de la source (testé sur IE).Quand on charge la page il y a un rectangle noir qui cache la partie de l'éditeur (testé sur Netscape 7.1). Si tu veux voir ce que tu peux faire avec les différents navigateurs il existe un open source qui s'appelle RichTextBox Editor ,il fonctionne sur Gecko et IE.

signaler à un administrateur
Commentaire de coucou747 le 11/07/2005 00:23:48

RichTextBox ne fonctionne pas non plus sous Konqueror...

signaler à un administrateur
Commentaire de Arto_8000 le 11/07/2005 00:59:23

C'est sûr, Konqueror ne supporte pas l'attribut designMode. A propos Konqueror est-ce que c'est vraiment utilisé sur le web. Sinon je vois pas pourquoi le fait qu'un script ne fonctionne sur Konqueror change quelquechose.

signaler à un administrateur
Commentaire de bultez le 11/07/2005 06:48:44

à Arto_8000
>>quand on insert un select et que l'on va voir
>>la source le select est en premier plan et cache
>>une partie de la source (testé sur IE).
"bug" connu. on n'arrive pas à mettre un
objet au dessus d'un select ( un div par ex )
j'ai lu que ça venait du fait que les select
n'étaient pas gérés comme les autres objets.
>>il y a un rectangle noir qui cache la partie
>>de l'éditeur (testé sur Netscape 7.1).
c'est du à quoi ? comment faire pour éviter ?
[ mais Netscape n'est-il pas mort ? ]
>>open source qui s'appelle RichTextBox Editor
peut-être puis-je y trouver comment faire
pour les autres navigateurs ? on trouve
ça où ? recherche avec google ?    @+

signaler à un administrateur
Commentaire de lordskyser1 le 11/07/2005 11:10:48

bon travail!
Dommage pour les navigateurs exotiques style Konqueror mais bon, c'est pas la majorité. Ceux qui utilisent ces navigateurs (hein coucou ;-)) n'ont qu'à en changer jusqu'à ce qu'ils soient plus au point lol. On va pas faire le travail de compatibilité à la place des développeurs du navigateur quand même. Paske sinan il marche pas non plus avec le navigateur que j'ai développé TotoNavigator....

signaler à un administrateur
Commentaire de coucou747 le 11/07/2005 13:33:48

Dans un sens Konqueror fait 1 % des visites sur mon site web, ce site web parle de la programmation, donc, c'est assez normal de croiser des linuxois qui aiment bien Konqueror. Cependant, quand on a Konqueror, on a souvent aussi Mozilla, Firefox et d'autres navigateurs gecko....
Konqueror est le navigateur par défaut de l'environement KDE sous linux, KDE est l'environement graphique par défaut sous beaucoups de distributions de linux. Il est vraiment bon, je n'ai croisé des problèmes qu'avec les wysiwygs... Konqueror a pour particularitée de gérer à la fois les normes classiques et une grande quantité de normes MS...
Konqueror a été créé par l'entreprise trolltek, ils font aussi KDE et QT, c'est une entreprise qui vit de l'open-source et qui dévelope en donnant ses produits aux linuxois et en faisant payer les windowsiens... Ce n'est pas un projet open source comme les autres dans le sens ou on ne peut pas intègrer le projet facilement, mais dans un sens, c'en est un à part entière, et on ne doit pas l'oublier...
Perso, j'essai de déveloper pour le maximum de monde quand je le peux, alors si on peut le faire, autant le faire, quand c'est pas possible, je comprends, mais on ne doit pas oublier un groupe sous prétexte qu'il est réduit alors qu'on pourrait l'intègrer facilement (pe). Faut aller voir sur linux-fr.org le sujet sera peut-être plus dévelopé...
L'éditeur de texte RichTextBox Editor a un défaut majeur : il est lent, et un défaut mineur : il n'est pas fait pour être lu (cf leurs retours à la ligne foireux et l'absence de commentaires...)

signaler à un administrateur
Commentaire de la_pin le 11/07/2005 19:04:30

Super sympa cet éditeur, j'aime bien la fonction enregistrer ^^

signaler à un administrateur
Commentaire de lordskyser1 le 11/07/2005 23:00:59

dernières questions sans rapport avec la source dslé : existe-il-des versions windows de konqueror, galéon et safari? Si oui, où les télécharger? Si ma feuille de style externe marche avec mozilla, firefox, netscape et MSIE, elles fonctionnera sous cs navigateurs "exotiques"? Voilà, dslé pour le dérangement mais je n'ai pas encore trouvé de réponse

signaler à un administrateur
Commentaire de Arto_8000 le 12/07/2005 03:30:57

A bultez -> Si tu veux la source de RichTextBox Editor je l'ai zipper et je l'ai mis sur le site :

http://www.geocities.com/scrip154/rte.zip

A coucou747 -> Je ne sais pas avec quel navigateur tu as chargé RichTextBox ,mais chez moi ça prend 1 seconde. C'est vrai que la source n'a aucun commentaire ,mais ça n'empêche pas le fait que l'on ne peut pas rien apprendre.

signaler à un administrateur
Commentaire de coucou747 le 12/07/2005 07:07:29

ces navigateurs ont pour moteur html :
-gecko pour Mozilla, firefox, galeon, epiphany
-khtml pour Konqueror
pour safari et opera, je n'en sais rien...

les moteurs seront prochainement accèssibles partout, je crois qu'ils sont déja accèssible sous windows, mais comme win ne m'interesse pas vraiment, je n'ai pas vérifié...

signaler à un administrateur
Commentaire de bultez le 12/07/2005 12:37:52

à Arto_8000, merci pour RTE.ZIP :
pas vu/appris grand chose...
d'ailleurs je trouve mon script
bien plus simple, plus lisible,
et plus complet.( mais c'est
normal, c'est le mien, je comprend
ce que j'ai écrit, et je ne vais
pas le dénigrer non plus )    @+

signaler à un administrateur
Commentaire de coucou747 le 13/07/2005 20:43:54

je te remercie vraiment, j'ai créé à mon tour mon propre wysiwyg, (je ne t'ai copié qu'une petite partie de la fonction init, alors on peut dire que je l'ai fait moi même, mais grace à toi, restons modeste...)
j'ai un petit problème, et une amélioration possible pour ton script : dans les wysiwygs classiques (les diférents offices,) quand on est sur une région sélecionnée, le bouton sélectionné est souligné, j'aimerais faire la même chose, tout ce que j'ai réussi à faire, c'est ça :
function toolbar_color(){
//alert(texte.queryCommandEnabled("JustifyFull"));
if (texte.queryCommandState("JustifyFull")==true)
document.getElementById("justifie").style.backgroundColor="#F00";
else
document.getElementById("justifie").style.backgroundColor="none";
if (texte.queryCommandState("Italic")==true)
document.getElementById("italique").style.backgroundColor="#F00";
else
document.getElementById("italique").style.backgroundColor="none";
setTimeout("toolbar_color();", 1000);
}

bon, c'est sur que c'est pas super super, la fonction s'appelle toutes les secondes, et c'est pas super cool, mais un onkeypress sur l'iframe ne fonctionne pas...
Cette fonction donne les commandes qui ont étés utilisées, mais pas les commandes qui ont étés utilisées sur la sélection...
Si quelqu'un pouvait m'aider, ça améliorerais nos deux wysiwyg...

signaler à un administrateur
Commentaire de bultez le 14/07/2005 13:58:32

ouais coucou747 , amélioration
possible et intéressante.
avec onkeyup, sous Internet
explorer, ça marche.
regardons pour les autres
navigateurs ( peu d'idées là
moi, espérons de l'aide ).

signaler à un administrateur
Commentaire de coucou747 le 14/07/2005 16:10:11

le setTimeout n'est qu'un détail, ce que je veux, c'est afficher le fait qu'on soit sur une zone soulignée, en gras ... ou non...

signaler à un administrateur
Commentaire de rottweiler le 17/07/2005 01:47:41

Le choix des couleur version standard est serait beaucoup mieux , sinon pas mal du tout ton job .

signaler à un administrateur
Commentaire de lacousine le 14/08/2005 22:43:43

je te remercie d'avoir affiché ton code ici, car j'essayais justement d'intégrer les balises à mon formulaire qui me permet d'écrire dans ma base de données. Il manquait de la mise en page. Je vais vérifier comment je pourrais intégrer certaine de tes fonctions à mon code.

signaler à un administrateur
Commentaire de zouam le 07/10/2005 08:42:25

slt tt le monde, je suis novice en javascript et j'aimerais intégrer ce sript a mon site, qlq un pourrais faire un petit tuto? merci

signaler à un administrateur
Commentaire de Netsuko le 20/10/2005 11:31:10

Slt tout le monde, j'ai un petit souci avec le code : J'essaye de récupérer la valeur de la textarea dans une deuxième page php par methode POST. Dans "Action" j'ai bien mis ma page php.
Rien ne s'affiche sauf quand j'enlève "display:none;" de la balise style de la textarea.
Mais du coup la mise en forme ne s'affiche plus en direct ...
Quelqu'un peut m'aider svp ?

P.S : Merci pour ce code c'est nikel !

signaler à un administrateur
Commentaire de Netsuko le 20/10/2005 11:32:04

Slt tout le monde, j'ai un petit souci avec le code : J'essaye de récupérer la valeur de la textarea dans une deuxième page php par methode POST. Dans "Action" j'ai bien mis ma page php.
Rien ne s'affiche sauf quand j'enlève "display:none;" de la balise style de la textarea.
Mais du coup la mise en forme ne s'affiche plus en direct ...
Quelqu'un peut m'aider svp ?

P.S : Merci pour ce code c'est nikel !

signaler à un administrateur
Commentaire de bultez le 20/10/2005 11:50:18

>>Rien ne s'affiche sauf quand >>j'enlève "display:none;"
ben oui, display:none c'est pour ne rien afficher
>>la mise en forme ne s'affiche plus en direct
ben oui, les balises ne sont pas interprétées
dans un textearea mais affichées comme du texte.

signaler à un administrateur
Commentaire de darkman2 le 08/11/2005 07:00:16

je trouve super sympa ton code
coté design c'est cool
mais essai de voir la compatibilité avec netscape et Konqueror
et bonne continuation

signaler à un administrateur
Commentaire de coucou747 le 08/11/2005 17:54:50

On ne peut pas le rendre compatible Konqueror à l'heure qu'il est... Faut en parler à TrollTeck

signaler à un administrateur
Commentaire de bultez le 09/11/2005 09:09:15

si coucou747 le dit c'est que c'est vrai,
merci donc à lui de cette information.

signaler à un administrateur
Commentaire de coucou747 le 09/11/2005 14:55:51

lol, j'ai passé du temps à faire quelquechose de fonctionnel sous tout les navigateurs, et finalement, j'ai fais un truc genre :
si t'as ie ou gecko, t'as un wysiwyg, si t'as KHTML, t'as un éditeur de BBCODE avec aperçu automatique...

Ma fonction est plutôt sympas, et l'aime bien le résultat, mais voila, je n'ai pas réussi à faire de wysiwyg sous konqueror, et on ne peut pas utiliser l'iframe pour ça... (en tout cas, je n'ai vu aucun exemple qui fonctionnait...)

signaler à un administrateur
Commentaire de famak le 17/03/2006 14:35:41

j'ai le meme probleme que zouam a savoir que je vien tout juste de commencer le javascript et que je comprend pas comment intégrer ton code qui fonctionne a merveille pour pouvoir modifier des page html déjà créer.

signaler à un administrateur
Commentaire de coucou747 le 17/03/2006 18:02:30

pour modifier des pages html, tu dois avoir un truc coté serveur pour les enregistrer...

signaler à un administrateur
Commentaire de ChrisPM le 20/03/2006 13:48:06

hello,

coucou747 > je ne sais pas si depuis ton dernier message sur le sujet, tu as réussi à faire ce que tu voulais, c'est à dire imiter le fonctionnement d'office ou de tout autre traitement de texte : en cliquant sur un texte, ou en se déplacant dessus au clavier, les boutons de la barre d'outils s'actualisent en fonction du style du texte. Et en cliquant sur un bouton pour appliquer le style, le bouton garde l'état activé de ce style.

Bref, si tu n'a pas encore réussi, je l'ai fait sur mon adapation perso du "cross browser rich text editor" de kevin roth, et ça marche très bien ! Ca m'indique le style (gras, italique, souligné, listes, etc), et la police/taille du texte choisie selon une liste. (j'ai imité le dessin et le fonctionnement, mis à part la saisie de valeurs, des combo-box dans office ^^

aussi, pour le choix de la couleur, j'ai imité le fonctionnement de word, à savoir que lorsqu'on choisit une couleur, la petite bande sous le pot de peinture se colore, et la couleur est conservée (par cookie) pour les prochaines visites de la page.

un exemple de mon intégration : http://forum.chrispm.com/post.php?idtheme=4&action=nouv&f=tous

si quelqu'un est intéressé, servez-vous, les js sont accessibles :D

signaler à un administrateur
Commentaire de coucou747 le 20/03/2006 19:04:36

j'ai aussi réussi à le faire

signaler à un administrateur
Commentaire de ChrisPM le 21/03/2006 07:29:34

héhé tant mieux alors ;)

signaler à un administrateur
Commentaire de bany74 le 28/03/2006 20:16:05

ChrisPM Merci pour tes scripts que je vais étudier de ce pas...
j'ai regardé ton forum il est magnifique.

tous ces posts sont trés instructifs merci à tous!

bon courage

signaler à un administrateur
Commentaire de DeWaRs le 12/10/2006 15:15:13

J'aimerai savoir comment integrer ce genre de script dans une page en PHP classique. En fait, ce genre de script permettrai de rajouter une news par exemple sans avoir a integrer de balise dans le texte. Ne connaissant rien au JS, j'aurais besoin de votre aide. scsof@free.fr si vous voulez me contacter.

signaler à un administrateur
Commentaire de mendossa le 18/12/2006 15:12:21

Bonjour à tous,

J'utilise actuellement ce script qui fonctionne très bien sous Internet Explorer 6; mais je viens de me rendre compte qu'il ne fonctionnait pas sous IE7.
La zone est vérrouillé, quelqu'un aurait-il une solution ??



signaler à un administrateur
Commentaire de bultez le 18/12/2006 15:26:47

salut Mendossa,
je l'avais essayé lors de l'installation de IE7 RC1 ( français )
et je viens de tester avec la version IE7 "d'aujourd'hui" :
aucun souci pour moi.
tu peux nous en dire plus ? car "pas de raisons", à priori !

signaler à un administrateur
Commentaire de BIGROSA le 27/03/2007 13:32:03

Bonjour à tous.
Super travail.
Je suis nul en java script.
J'essaie d'envoyer à une page via son adresse le code html du texte tapé.

merci par avance.

signaler à un administrateur
Commentaire de <