[JS] Probléme création d'un bbcode => apercu

Probléme création d'un bbcode => apercu [JS] - HTML/CSS - Programmation

Marsh Posté le 13-04-2007 à 19:46:26    

Bonjour  
Je suis entrain de créer mon propre langage de mise en page et j'ai un problème lors de l'apercu.
j'ai créer des boutons pour que le visiteur puisse modifier l'alignement de son code et malheureusement le code de prévisualisation ne marche pas.
 
Voici le code

Code :
  1. var timer=0;
  2. var ptag=String.fromCharCode(5,6,7);
  3. function  previsualisation()
  4. {
  5. t=document.formulaire.textarea.value
  6. t=code_to_html(t)
  7. if (document.getElementById) document.getElementById("prev" ).innerHTML=t
  8. if (document.formulaire.auto.checked) timer=setTimeout(previsualisation,1)
  9. <!-- le "1" est le temps que met le texte à s'afficher, "1" : le texte s'affichera en même temps que l'on écrit (en s) -->
  10. }
  11. function automatique()
  12. {
  13. if (document.formulaire.auto.checked) previsualisation() <!-- si on a cocher la case d'aperçu automatique -->
  14. }
  15. function code_to_html(t) {
  16. t=nl2khol(t)
  17. // balise Gras <!-- on lui dis que telles balises correspondent à tels codes en HTML -->
  18. t=deblaie(/(\<\/gr\> )/g,t)
  19. t=remplace_tag(/\<gr\>(.+)\<\/gr\>/g,'<span style="font-weight: bold;">$1</span>',t)
  20. t=remblaie(t)
  22. //balise position gauche
  23. t=deblaie(/(\<\/position\> )/g,t)
  24. t=remplace_tag(/\<position style=gauche\>(.+)\<\/position\>/g,'<div style="text-align: left;">$1</div>',t)
  25. t=remblaie(t)
  27. //balise position droite
  28. t=deblaie(/(\<\/position\> )/g,t)
  29. t=remplace_tag(/\<position style=gauche\>(.+)\<\/position\>/g,'<div style="text-align: left;">$1</div>',t)
  30. t=remblaie(t)
  31. // tout le code qui suit c'est pour transformer toutes les balises, comme les preg_replace en PHP  
  32. function deblaie(reg,t) {
  33. textarea=new String(t);
  34. return textarea.replace(reg,'$1\n');
  35. }
  36. function remblaie(t) {
  37. textarea=new String(t);
  38. return textarea.replace(/\n/g,'');
  39. }
  40. function remplace_tag(reg,rep,t) {
  41. textarea=new String(t);
  42. return textarea.replace(reg,rep);
  43. }
  44. function nl2br(t) {
  45. textarea=new String(t);
  46. return textarea.replace(/\n/g,'<br/>');
  47. }
  48. function nl2khol(t) {
  49. textarea=new String(t);
  50. return textarea.replace(/\n/g,ptag);
  51. }
  52. function unkhol(t) {
  53. textarea=new String(t);
  54. return textarea.replace(new RegExp(ptag,'g'),'\n');
  55. }


 
voici l'autre partie du code si sa vous aide

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4. <title>ninCode en Javascript</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css"/>
  7. <script language="javascript" type="text/javascript" src="prev.js"></script><!-- on appelle le fichier prev.js pour faire fonctionne la prévisualisation -->
  8. <script language="Javascript">
  9. function nincode(nindebut, ninfin)
  10. {
  11. var input = window.document.formulaire.textarea;
  12. input.focus();
  13. /* pour IE (toujous un cas appar lui ;) )*/
  14. if(typeof document.selection != 'undefined')
  15. {
  16. var range = document.selection.createRange();
  17. var insText = range.text;
  18. range.text = nindebut + insText + ninfin;
  19. range = document.selection.createRange();
  20. if (insText.length == 0)
  21. {
  22. range.move('character', -ninfin.length);
  23. }
  24. else
  25. {
  26. range.moveStart('character', nindebut.length + insText.length +ninfin.length);
  27. }
  28. range.select();
  29. }
  30. /* pour les navigateurs plus récents que IE comme Firefox... */
  31. else if(typeof input.selectionStart != 'undefined')
  32. {
  33. var start = input.selectionStart;
  34. var end = input.selectionEnd;
  35. var insText = input.value.substring(start, end);
  36. input.value = input.value.substr(0, start) + nindebut + insText + ninfin + input.value.substr(end);
  37. var pos;
  38. if (insText.length == 0)
  39. {
  40. pos = start + nindebut.length;
  41. }
  42. else
  43. {
  44. pos = start +nindebut.length + insText.length + ninfin.length;
  45. }
  46. input.selectionStart = pos;
  47. input.selectionEnd = pos;
  48. }
  49. /* pour les autres navigateurs comme Netscape... */
  50. else
  51. {
  52. var pos;
  53. var re = new RegExp('^[0-9]{0,3}$');
  54. while(!re.test(pos))
  55. {
  56. pos = prompt("insertion (0.." + input.value.length + " ):", "0" );
  57. }
  58. if(pos > input.value.length)
  59. {
  60. pos = input.value.length;
  61. }
  62. var insText = prompt("Veuillez taper le texte" );
  63. input.value = input.value.substr(0, pos) + nindebut + insText + ninfin + input.value.substr(pos);
  64. }
  65. }
  67. function smilies(img)
  68. {
  69. window.document.formulaire.textarea.value += '' + img + '';
  70. }
  72. function imagetraitement()
  73. {
  74. var lien_image=prompt('Recopiez le lien vers votre image','ici');
  75. if(lien_image!=null)
  76. {
  77. window.document.formulaire.textarea.value += '' +'<image lien='+ lien_image +'/>'+ '';
  78. }
  79. }
  81. function lien_traitement()
  82. {
  83. var lien=prompt('Recopiez votre lien','ici');
  84. var lien_nom=prompt('Mettez ici le nom qui apparaitra dans la page','ici');
  85. if(lien!=null && lien_nom!=null)
  86. {
  87. window.document.formulaire.textarea.value += '' +'<lien adresse='+ lien +'>'+ lien_nom+'</lien>'+'';
  88. }
  89. }
  91. </script>
  92. </head>
  93. <body>
  94. <form method="post" action="un_page.html" name="formulaire">
  95. <!--Marche -->
  96. <input type="button" id="gras" name="gras" value="Gras" onClick="javascript:nincode('<gr>', '</gr>');return(false)" />
  97. <input type="button" id="italic" name="italic" value="Italic" onClick="javascript:nincode('<it>', '</it>');return(false)" />
  98. <input type="button" id="souligner" name="souligner" value="souligner" onClick="javascript:nincode('<soul>', '</soul>');return(false)" />
  99. <input type="button" id="barrer" name="barrer" value="barrer" onClick="javascript:nincode('<bar>', '</bar>');return(false)" />
  101. <select name ="titre" id="titre">
  102. <option value="titre1" onClick="javascript:nincode('<tit1>','</tit1>');return(false)">Titre très important</option>
  103. <option value="titre2" onClick="javascript:nincode('<tit2>','</tit2>');return(false)">Titre important</option>
  104. <option value="titre3" onClick="javascript:nincode('<tit3>','</tit3>');return(false)">sous-titre</option>
  105. </select
  107. <!-- pour permettre la mise en page de son texte -->
  108. <input type="image" src="image/gauche.jpg" onClick="javascript:nincode('<position style=gauche>','</position>');return(false)"/>
  109. <input type="image" src="image/droite.jpg" onClick="javascript:nincode('<position style=droite>','</position>');return(false)"/>
  110. <input type="image" src="image/centrer.jpg" onClick="javascript:nincode('<position style=centrer>','</position>');return(false)"/>
  111. <input type="image" src="image/justifier.jpg" onClick="javascript:nincode('<position style=justifier>','</position>');return(false)"/>
  113. <!--Pour personnalisez la taille du texte-->
  114. <select name ="tailletexte" id="tailletexte">
  115. <option value="tres_tres_petit" onClick="javascript:nincode('<taille hauteur=trestrespetit>','</taille>');return(false)">tr&eacute;s tr&eacute;s petit</option>
  116. <option value="tres_petit" onClick="javascript:nincode('<taille hauteur=trespetit>','</taille>');return(false)">tr&eacute;s petit</option>
  117. <option value="petit" onClick="javascript:nincode('<taille hauteur=petit>','</taille>');return(false)">moyen</option>
  118. <option value="moyen" onClick="javascript:nincode('<taille hauteur=moyen>','</tit3>');return(false)">grand</option>
  119. <option value="grand" onClick="javascript:nincode('<taille hauteur=grand>','</taille>');return(false)">tr&eacute;s grand</option>
  120. <option value="tres_grand" onClick="javascript:nincode('<taille hauteur=tresgrand>','</taille>');return(false)">sous-titre</option>
  121. <option value="tres_tres_grand" onClick="javascript:nincode('<taille hauteur=trestresgrand>','</taille>');return(false)">tr&eacute;s tr&eacute;s grand</option>
  122. </select>
  123. <input type="button" id="cit" name="cit" value="citation" onClick="javascript:nincode('<citation nompers=>','</citation>');return(false)" />
  125. <!-- pour inserer une  image-->
  126. <input type="button" id="image" name="image" value="Image" onClick="javascript:imagetraitement();return(false)" />
  128. <!--pour inserer un lien -->
  129. <input type="button" id="lien" name="lien" value="Lien" onClick="javascript:lien_traitement();return(false)" />
  131. <!--pour les couleur-->
  132. <select name ="couleur" id="couleur">
  133. <option value="noir" onClick="javascript:nincode('<couleur nom=noir>','</couleur>');return(false)"class="noir"> couleur noir</option>
  134. <option value="argent" onClick="javascript:nincode('<couleur nom=argent>','</couleur>');return(false)"class="argent"> couleur argent</option>
  135. <option value="gris" onClick="javascript:nincode('<couleur nom=gris>','</couleur>');return(false)"class="gris"> couleur gris</option>
  136. <option value="rouge" onClick="javascript:nincode('<couleur nom=rouge>','</couleur>');return(false)"class="rouge"> couleur rouge</option>
  137. <option value="vertcler" onClick="javascript:nincode('<couleur nom=vertclair>','</couleur>');return(false)"class="vertcler"> couleur vert clair</option>
  138. <option value="vert" onClick="javascript:nincode('<couleur nom=vert>','</couleur>');return(false)"class="vert"> couleur vert</option>
  139. <option value="jaune" onClick="javascript:nincode('<couleur nom=jaune>','</couleur>');return(false)"class="jaune"> couleur jaune</option>
  140. <option value="olive" onClick="javascript:nincode('<couleur nom=olive>','</couleur>');return(false)"class="olive"> couleur argent</option>
  141. <option value="bleu" onClick="javascript:nincode('<couleur nom=bleu>','</couleur>');return(false)"class="bleu"> couleur bleu</option>
  142. <option value="bleufoncer" onClick="javascript:nincode('<couleur nom=bleufoncer>','</couleur>');return(false)"class="bleufoncer"> couleur bleu fonc&eacute;</option>
  143. </select
  147. <!--Pas été modifié, les smiley perso au site sont en création -->
  148. <img src="http://siteduzero.com/Templates/images/smilies/smile.png" title="" alt="" onClick="javascript:smilies(':D');return(false)" />
  149. <br />
  150. <input name="auto" id="auto" type="checkbox" onClick="automatique()" /> <label for="auto">Prévisualisation automatique</label>
  151. <!-- on créer la case à cocher pour un prévisualisation automatique -->
  152. <br />
  153. <textarea cols=35 rows=10 id="textarea" name="textarea">C'est dans ce textarea que va s'afficher les balises ninCode.</textarea>
  154. <br />
  155. <input type="button" value="Prévisualiser" onClick="previsualisation();return(false)" /><!-- ce bouton va permettre aux utilisateurs de d'avoir un aperçu quand ils le veulent, pas en direct -->
  156. <div style="border: 1px dashed #000000; padding: 0.2em; height: 200px; overflow: auto; width: 19%;" align="left" id="prev"></div>
  157. <!-- on créer un div avec quelques caractéristique, on lui donne un nom et on ne le remplit pas, on le laisse vide -->
  158. <input type="submit" name="submit" value="Envoyer" />
  159. </form>
  160. </body>
  161. </html>


 
Merci de votre lecture et éventuellement de votre aide

Reply

Marsh Posté le 13-04-2007 à 19:46:26   

Reply

Marsh Posté le 27-04-2007 à 18:21:01    

J'ai trouvé c'est bon

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed