Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Faire un tuto "Comment faire un wysiwyg" > Lecture du sujet

Faire un tuto "Comment faire un wysiwyg"

Dois-je le faire ?

Vous devez être inscrit pour pouvoir poster des messages

Page : Précédente  1  2  3  4  Suivante
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : Précédente  1  2  3  4  Suivante
Hors ligne SpintroniK # Posté le 30/07/2007 à 21:48:24
Groupe : Membres
Reprise du dernier message de la page précédente :
Est-ce que tu peux remettre la démo de ton WYSIWYG ? (on dirait que les fichiers on ét supprimés)
Merci.
Hors ligne conflict # Posté le 30/07/2007 à 22:39:31
Avatar
Groupe : Membres
Oui !!!
Tout juste...
Mais je les mettrai demain car je n'ai pas trop le temps...
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne bolox # Posté le 02/08/2007 à 11:46:50
Groupe : Membres
Bonjour,
Je suis tout aussi intérréssé par cette demo ou puis-je la trouver ?
Vas tu faire le tuto en question ?
Édité le 02/08/2007 à 11:48:30 par bolox
Hors ligne conflict # Posté le 15/08/2007 à 18:16:31
Avatar
Groupe : Membres
Bin alors,j'abandonne...
Je le mettrai sur mon site !
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Connecté The Climber # Posté le 20/08/2007 à 21:02:43
Avatar
Groupe : Membres
Ouai d'accord, mais il est ou sur ton site ???

(sans vouloir être indiscret)

Et pourquoi tu veu arrêter de faire ton tuto...
Moi je l'attend avec un peu d'impassience

@ +
Option Valais
Édité le 20/08/2007 à 21:03:03 par The Climber
Venez voir mon nouveaux site : Alpinlife.ch

Switzerland
FF vs IE <== Perso FF !! :D
Avast
 
Hors ligne cabalpit # Posté le 22/08/2007 à 22:02:46
The World don't need civil war
Groupe : Membres
Salut tout le monde,
a ca fais 3 ans que je manque en france et j'ai voulu un peu renouer et je suis tomber sur ce forum tres sympa et convivial grace aux user.
je vous prie de m'excuser pour les fautes d'ortho ca fais trois ans que je n'ai pas ecrit francais et dsl pour les accents j'ai pas le clavier pour.

je pense que tu dois faire ce tuto. ;)
j'irais bien aussi y jetais un oeil des que tu l'auras fini. ;)
however je suis alle sur ton site et tu a laisse les files open pas une tres bonne idees maybe.

dsl si j'integre des mots Anglais.
en tous cas si tu veux savoir comment ce comporte ton wysiwig sur safari 3 mac(os x). je serais content de te dire comment il se comporte. :).
et si tu veux mon avis pour l'iframe c'est une bonne idee et la seule que je vois. il y aurais un autre moyen de faire mais bien long et fastidieux, c'est par language compilable mais ne t'embete pas avec ce genre de solution souvent les browser mettent longtemps a le charger tu dois penser a ce qui on encore une connexion lente et en plus si me souvenir son bon sous IE tu as droit au controle du laguage compilable.

non vas y fonce!!!! ;)
the wars go on with brainwashed pride
 
Hors ligne conflict # Posté le 04/09/2007 à 19:09:13
Avatar
Groupe : Membres
Excusez-moi du retard...
Le tuto a été interrompu suite à l'attaque d'un virus sur mon PC...
je recommencerai tout,mais pas tout de suite...
La rentrée,c'est un poids ;)
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne MisterK # Posté le 21/09/2007 à 18:35:47
Groupe : Membres
Salut conflict bonne chance pour ton tuto Jai hate dle voir Jai besoin d'un WYSIWYG
encore une foi bonne chance
Je suis un ZeRo :p
 
Hors ligne Radio... # Posté le 16/12/2007 à 15:08:10
Punk Generation
Avatar
Groupe : Membres
salut,

Je relance le sujet.
Est=ce que pour finir, tu fais le tutoriel?
Si oui, pour quand le prévois-tu?
Si non, pourquoi ne le fais-tu pas?

Le lien sur la premiere page est mort.

Merci d'avance.
Radio...
Problème de codage de mon design, venez m'aider...
 
Hors ligne Fieldset # Posté le 16/12/2007 à 18:31:08
Avatar
Groupe : Membres
Simplement...Quel est le principe pour coder un WYSIWYG ?
Pour vous aider à débuger vos script JavaScript, installez FireBug (Un module pour FireFox)
 
Hors ligne mikaweb # Posté le 12/01/2008 à 19:58:57
Groupe : Membres
Oui on aimerait bien des nouvelles.
J'aime bien TinyMCE mais c'est lourd.
Soit je fais un petit moi même soit je crée un BBCOde mais j'aime pas trop.

J'ai un peu regardé le code de Invision Board et c'est inbuvable :D
Arsenal France ;) :p
 
Hors ligne conflict # Posté le 04/02/2008 à 11:02:09
Avatar
Groupe : Membres
Excusez-moi...
Le tuto est en suspend...mais je veux bien distribuer le code...(malheureusement pas commenté...)
Ou alors,si quelqu'un veut reprendre le tuto,il n'a qu'à m'envoyer un message.
Il est le bienvenu !

page.html :
Code : Autre - Afficher / masquer les numéros de ligne
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="wysi_ajout.js">
  4. </script>
  5. </head>
  6. <body onLoad="initialisation()">
  7. <table border="1px inset #cccccc" width="800" cellspacing="0" cellpadding="0" style="background-color:#cccccc;" align="center" >
  8. <!-- Menu haut //-->
  9. <tr>
  10. <td id="haut_wysi" style="" height="50px" align="center">
  11.   <p>
  12.   <input type="image" src="images/icon_link.gif" onClick="addElement('lien')" title="Insérer un lien"/>
  13.   <input type="image" src="images/icon_img.gif" onClick="addElement('img')" title="Insérer une image"/>
  14.   <input type="image" src="images/barr_horz.gif" onClick="setContent('inserthorizontalrule')" title="Insérer une séparation"/>
  15.   
  16.   <input type="image" src="images/barre_vert.gif" />
  17.   
  18.   <input type="image" src="images/icon_italic.gif" onClick="setContent('italic');" title="Italique"/>
  19.     <input type="image" src="images/icon_bold.gif" onClick="setContent('bold');" title="Gras"/>
  20.     <input type="image" src="images/icon_underline.gif" onClick="setContent('underline');" title="Souligné"/>
  21.     <input type="image" src="images/icon_strike.gif" onClick="setContent('strikethrough');" title="Barré"/>
  22.     <input type="image" src="images/icon_subscript.gif" onClick="setContent('subscript');" title="Indice"/>
  23.     <input type="image" src="images/icon_superscript.gif" onClick="setContent('superscript');" title="Exposant"/>
  24.         
  25.         
  26.         <input type="image" src="images/barre_vert.gif" />
  27.         
  28.     
  29.     <input type="image" src="images/icon_bullist.gif" onClick="setContent('insertunorderedlist');" title="Liste a puce"/>
  30.     <input type="image" src="images/icon_numlist.gif" onClick="setContent('insertorderedlist');" title="Liste numerotée"/>
  31.         
  32.         
  33.         <input type="image" src="images/barre_vert.gif" />
  34.         
  35.     
  36.     <input type="image" onClick="setContent('justifyleft')" src="images/icon_left.gif"/>
  37.     <input type="image" onClick="setContent('justifycenter')" src="images/icon_center.gif"/>
  38.     <input type="image" onClick="setContent('justifyright');" src="images/icon_right.gif"/>
  39.     
  40.         
  41.         <input type="image" src="images/barre_vert.gif" />
  42.         
  43.         
  44.     <a target="_blank" href="../smiley.php"><img style="border:none" src="images/smileys/smile.png" title="Insérer un smiley"/></a>
  45. <br />
  46.     Police : Taille : 
  47.     <select onChange="changeTaille(this.value);">
  48.       <option value="1">1</option>
  49.       <option value="2">2</option>
  50.       <option value="3" selected>3</option>
  51.       <option value="4">4</option>
  52.       <option value="5">5</option>
  53.       <option value="6">6</option>
  54.       <option value="7">7</option>
  55.     </select>
  56.         
  57.         
  58.     Couleur : 
  59.     <select onChange="changerCouleur(this.value)">
  60.       <option value="black" style="background-color:black;" selected>&nbsp;</option>
  61.       <option value="gray" style="background-color:gray;" >&nbsp;</option>
  62.       <option value="blue" style="background-color:blue;" >&nbsp;</option>
  63.       <option value="red" style="background-color:red;" >&nbsp;</option>
  64.       <option value="pink" style="background-color:pink;" >&nbsp;</option>
  65.       <option value="yellow" style="background-color:yellow;" >&nbsp;</option>
  66.     </select>
  67.   </td>
  68. </tr>
  69. <!-- iframe //-->
  70. <tr>
  71. <td align="center" height="150"><iframe width="100%" height="100%" frameborder="no" style="background-color:white;cursor:text;" id="editeur"> </iframe></td>
  72. </tr>
  73. </table>
  74. <input type="button" onclick="changer()" value="Code HTML : " />
  75. <textarea id="code"></textarea>
  76. <center>
  77. </center>
  78. </body>
  79. </html>


wysi_ajouts.js :
Code : JavaScript - Afficher / masquer les numéros de ligne
  1. nav = "";
  2. nav = navigator.appName;
  3.  
  4. function initialisation()
  5. {
  6.  
  7. if(nav == "Microsoft Internet Explorer")
  8. {
  9. win = window.frames["editeur"];
  10. doc = win.document;
  11. }
  12. else
  13. {
  14. doc = document.getElementById("editeur").contentDocument;
  15. win = document.getElementById("editeur").contentWindow;
  16. }
  17. if(doc.designMode != "On")
  18. {
  19. doc.designMode = "On";
  20. }
  21. win.focus();
  22. }
  23.  
  24.  
  25. function plusHtml(plus)
  26. {
  27. document.getElementById("editeur").contentWindow.document.body.innerHTML = document.getElementById("editeur").contentWindow.document.body.innerHTML+plus;
  28. }
  29.  
  30. function addElement(choix)
  31. {
  32. if(choix == "lien")
  33. {
  34. url = prompt("Quel est la cible du lien (ex. : http://www.google.com/logo.gif) ?","http://");
  35. if(url)
  36. {
  37. plusHtml("<a href='"+url+"'>"+url+"</a>");
  38. }
  39. }
  40. else if(choix == "img")
  41. {
  42. url = prompt("Quel est l'adresse d l'image (ex. : http://www.google.com/logo.gif) ?","http://");
  43. if(url)
  44. {
  45. plusHtml("<img src='"+url+"'/>");
  46. }
  47. }
  48. }
  49.  
  50.  
  51. function setContent(action)
  52. {
  53. if(nav == "Microsoft Internet Explorer")
  54. {
  55. win = window.frames['editeur'];
  56. doc = win.document;
  57. }
  58. else
  59. {
  60. win = document.getElementById('editeur').contentWindow;
  61. doc = document.getElementById('editeur').contentDocument;
  62. }
  63. doc.execCommand(action,false,null);
  64. win.focus();
  65. }
  66.  
  67. function changeTaille(taille)
  68. {
  69. if(nav == "Microsoft Internet Explorer")
  70. {
  71. win = window.frames['editeur'];
  72. doc = win.document;
  73. }
  74. else
  75. {
  76. win = document.getElementById('editeur').contentWindow;
  77. doc = document.getElementById('editeur').contentDocument;
  78. }
  79. doc.execCommand("FontSize",false,taille);
  80. win.focus();
  81. }
  82.  
  83. function changer()
  84. {
  85. document.getElementById('code').value = document.getElementById("editeur").contentWindow.document.body.innerHTML;
  86. }
  87.  
  88. function changerCouleur(couleur)
  89. {
  90. if(nav == "Microsoft Internet Explorer")
  91. {
  92. win = window.frames['editeur'];
  93. doc = win.document;
  94. }
  95. else
  96. {
  97. win = document.getElementById('editeur').contentWindow;
  98. doc = document.getElementById('editeur').contentDocument;
  99. }
  100. doc.execCommand("ForeColor",false,couleur);
  101. win.focus();
  102. }
  103. function mettreHTML()
  104. {
  105. document.getElementById("contenu").value = document.getElementById("editeur").contentWindow.document.body.innerHTML;
  106. }


C'est une page qui donne le code HTML ...


PS:Pour celui qui veut,mon tuto est fini,il reste juste deux,trois trucs à rajouter,mais je n'ai pas la motivation ...
Édité le 04/02/2008 à 11:04:25 par conflict
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne Couscouss Sensei # Posté le 04/02/2008 à 11:06:34
Avatar
Groupe : Membres
Oui moi j'aimerai voir ton tuto pour le wysiwyg
webmaster/webdesigner
le froid conserve tout, même les cons, et les cons servent parfois…
Image utilisateur
 
Hors ligne DDR2 # Posté le 04/02/2008 à 11:23:08
sériez vous êtes flickrés !
Avatar
Groupe : Membres
Allez fais-le !
Si il te reste que "deux-trois trucs", fais-le !
Si tu as besoin de relecteur etc... n"hésites surtout pas....

Mais c'est dommage que tu ne le fasse pas :D
Journal de l'inutile
 
Hors ligne conflict # Posté le 04/02/2008 à 11:25:48
Avatar
Groupe : Membres
bon...
Je m'y donne à fond aujourd'hui...
Jusqu'à ce soir...
Je devrais le finir...
Demain matin,je le lance à la validation...

EDIT:Bientôt fini ^^
Je ne me rappelais plus qu'il était si bien fichu par rapport au code que je viens de vous donner xD
Édité le 04/02/2008 à 11:52:39 par conflict
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne Couscouss Sensei # Posté le 04/02/2008 à 17:11:07
Avatar
Groupe : Membres
J'ai hate ^^
webmaster/webdesigner
le froid conserve tout, même les cons, et les cons servent parfois…
Image utilisateur
 
Hors ligne conflict # Posté le 04/02/2008 à 17:49:42
Avatar
Groupe : Membres
Il est en attente de validation,mais je ne pense pas qu'il passe cette étape...sinon,je peux regarder pour vous le filer sur un site ^^
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne Couscouss Sensei # Posté le 04/02/2008 à 17:51:06
Avatar
Groupe : Membres
dommage s'il passe pas
si tu a de bon site je suis preneur
webmaster/webdesigner
le froid conserve tout, même les cons, et les cons servent parfois…
Image utilisateur
 
Hors ligne conflict # Posté le 04/02/2008 à 17:54:35
Avatar
Groupe : Membres
En faite,le code est assez bordeliqe car il faut gérer TOUS les cas...
S'il n'y avait que firefox ou IE,ce serait simple...
Et il faut aussi penser voir si le designMode est activé,si le JS est activé...
En bref,c'est une belle soupe xD
C'est pour ca que je me demande si ca va passer...
Le tuto est énorme...Mais c'est parce que je répète beaucoup de fois la même chose
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne Nephthys # Posté le 06/02/2008 à 16:31:02
Infini = 1 puis 2 puis 3 ...
Avatar
Groupe : Membres
Tu pense avoir fini quand ?
Hors ligne mica # Posté le 06/02/2008 à 16:47:29
Avatar
Groupe : Membres
salut a vous,

heu dite moi, en français dans le texte c'est quoi un WYSIWYG ? o_O

quel est l interet, je veux dire ca permet de faire quoi????

je me sens con la.... :euh:

ha au fait y a pas de lien valide apperement dans les pages précédentes...

merci
MON SITE
"j'entend et j'oublie,je vois et je me souvient,je fait et je comprends
je suis novice soyez indulgent
 
Hors ligne Couscouss Sensei # Posté le 06/02/2008 à 16:50:24
Avatar
Groupe : Membres
vas faire un tour ici : Merci wiki ;)
webmaster/webdesigner
le froid conserve tout, même les cons, et les cons servent parfois…
Image utilisateur
 
Hors ligne conflict # Posté le 06/02/2008 à 16:52:37
Avatar
Groupe : Membres
Euh...je l'ai fini,mais il est encore en attente de validation !
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne Nephthys # Posté le 06/02/2008 à 17:54:10
Infini = 1 puis 2 puis 3 ...
Avatar
Groupe : Membres
Vivement qu'il sorte ^^
Hors ligne mica # Posté le 06/02/2008 à 21:01:22
Avatar
Groupe : Membres
mais ca t apporte quoi concretement ?

je sais pour vous c est evident.............
MON SITE
"j'entend et j'oublie,je vois et je me souvient,je fait et je comprends
je suis novice soyez indulgent
 
Hors ligne conflict # Posté le 06/02/2008 à 21:38:50
Avatar
Groupe : Membres
C'est juste pour que ce soit plus pratique pour l'utilisateur final...
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne mica # Posté le 06/02/2008 à 22:59:16
Avatar
Groupe : Membres
Citation : conflict
C'est juste pour que ce soit plus pratique pour l'utilisateur final...

MAIS ca lui apporte quoi a l utilisateur final????
MON SITE
"j'entend et j'oublie,je vois et je me souvient,je fait et je comprends
je suis novice soyez indulgent
 
Hors ligne conflict # Posté le 07/02/2008 à 07:44:57
Avatar
Groupe : Membres
De voir directement le résultat...
Car avec le BBCode,on ne voit pas ce que ca va donner !
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne Couscouss Sensei # Posté le 07/02/2008 à 10:34:32
Avatar
Groupe : Membres
Citation : mica
Citation : conflict
C'est juste pour que ce soit plus pratique pour l'utilisateur final...

MAIS ca lui apporte quoi a l utilisateur final????


tu clique sur le bouton pour mettre en gras par exemple et ton texte se met en gras alors que sinon il se retrouve entouré par des balise du style <gras>ton texte</ gras>.
Beaucoup plus simple et compréhensible pour les utilisateurs novices
Édité le 07/02/2008 à 10:34:52 par Couscouss Sensei
webmaster/webdesigner
le froid conserve tout, même les cons, et les cons servent parfois…
Image utilisateur
 
Hors ligne conflict # Posté le 07/02/2008 à 17:12:08
Avatar
Groupe : Membres
Bon exemple ^^
...Ca en met du temps !!!
Mais bon...j'imagine qu'il n'y a pas que moi...
Team Fortress 2 POWAAA !

La blague d'un pote vraiment trop con:
"Tu sais comment on fait du hachich ? non ? et bin c'est simple, tu prend du hachi parmentier, tu enlève le parmentier et tu rajoutes un petit suisse, ha ha a !" hum hum hum xD c'est pour ca que je prefere l'appeller "une connaissance"
 
Hors ligne rachel # Posté le 07/02/2008 à 22:15:06
Groupe : Membres
Citation : conflict
Petit rappel : Un wysiwyg est un "textarea"

Sans vouloir entrer en conflit avec toi, wysiwyg ne veut pas dire ça mais :

What You See Is What You Get

Par exemple: Dreamweaver er NVU sont des wysiwyg

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 289 Zéros connectés | Requêtes SQL 7 requêtes | Temps de génération de la page : Total (SQL) 0.0434s (0.0229s)