Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2739 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1542781
ricici123
Posté le 13-04-2007 à 19:46:26  profilanswer
 

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

mood
Publicité
Posté le 13-04-2007 à 19:46:26  profilanswer
 

n°1550756
ricici123
Posté le 27-04-2007 à 18:21:01  profilanswer
 

J'ai trouvé c'est bon


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[WinCE] Probleme lors du linkage avec la STLCreation visite virtuelle en php
probleme de programme en CProblème de Click Event sur button dynamic
Problème de mysqli_query (y marche chez moi mais pas chez OVH)problème pour ouvrir un .VCF
[wxWidgets et OpenGL] Problème de stack overflowproblème de casting objet
probléme extraction de donnée bdd avec des virgulesProblème avec MAP/AREA ou bug ?
Plus de sujets relatifs à : [JS] Probléme création d'un bbcode => apercu

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.117 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR