Partage
  • Partager sur Facebook
  • Partager sur Twitter

BBCode et aperçu en direct

s0ak
  • HTML / CSS
    19 août 2006 à 13:34:06

    Bonjour, j'ais mon BBCode qui fonctionne correctement mais l'aperçu en direct ne fonctionne pas, pouvez vous me dire quel est mon erreur..

    merci d'avance

    form.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>BBCode en Javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="javascript" type="text/javascript" src="prev.js"></script><!-- on appelle le fichier prev.js pour faire fonctionne la prévisualisation -->
    <script language="Javascript">
    function bbcode(bbdebut, bbfin)
    {
    var input = window.document.formulaire.textarea;
    input.focus();
    /* pour IE (toujous un cas appar lui ;) )*/
    if(typeof document.selection != 'undefined')
    {
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = bbdebut + insText + bbfin;
    range = document.selection.createRange();
    if (insText.length == 0)
    {
    range.move('character', -bbfin.length);
    }
    else
    {
    range.moveStart('character', bbdebut.length + insText.length + bbfin.length);
    }
    range.select();
    }
    /* pour les navigateurs plus récents que IE comme Firefox... */
    else if(typeof input.selectionStart != 'undefined')
    {
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + bbdebut + insText + bbfin + input.value.substr(end);
    var pos;
    if (insText.length == 0)
    {
    pos = start + bbdebut.length;
    }
    else
    {
    pos = start + bbdebut.length + insText.length + bbfin.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
    }
    /* pour les autres navigateurs comme Netscape... */
    else
    {
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos))
    {
    pos = prompt("insertion (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length)
    {
    pos = input.value.length;
    }
    var insText = prompt("Veuillez taper le texte");
    input.value = input.value.substr(0, pos) + bbdebut + insText + bbfin + input.value.substr(pos);
    }
    }
    function smilies(img)
    {
    window.document.formulaire.textarea.value += '' + img + '';
    }
    </script>
    </head>
    <body>
    <form method="post" action="un_page.html" name="formulaire">
    <input type="button" id="gras" name="gras" value="Gras" onClick="javascript:bbcode('[gras]', '[/gras]');return(false)" />
    <input type="button" id="italic" name="italic" value="Italic" onClick="javascript:bbcode('[italic]', '[/italic]');return(false)" />
    <input type="button" id="image" name="image" value="Image" onClick="javascript:bbcode('[image]', '[/image]');return(false)" />
    <input type="button" id="lien" name="lien" value="Lien" onClick="javascript:bbcode('[url=]', '[/url]');return(false)" />
    <a href="#" title="Créer une citation" onClick="javascript:bbcode('[citation=AUTEUR]', '[/citation]');return(false)">Citation</a>
    <img src="http://siteduzero.com/Templates/images/smilies/smile.png" title="" alt="" onClick="javascript:smilies(':D');return(false)" />
    <br />
    <input name="auto" id="auto" type="checkbox" onClick="automatique()" /> <label for="auto">Prévisualisation automatique</label>
    <!-- on créer la case à cocher pour un prévisualisation automatique -->
    <br />
    <textarea cols=35 rows=10 id="textarea" name="textarea">C'est dans ce textarea que va s'afficher les balises BBCode.</textarea>
    <br />
    <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 -->
    <div style="border: 1px dashed #000000; padding: 0.2em; height: 200px; overflow: auto; width: 19%;" align="left" id="prev"></div>
    <!-- on créer un div avec quelques caractéristique, on lui donne un nom et on ne le remplit pas, on le laisse vide -->
    <input type="submit" name="submit" value="Envoyer" />
    </form>
    </body>
    </html> 


    prev.js
    var timer=0;
    var ptag=String.fromCharCode(5,6,7);
    function  previsualisation() {
    t=document.formulaire.textarea.value 
    t=code_to_html(t)
    if (document.getElementById) document.getElementById("prev").innerHTML=t
    if (document.formulaire.auto.checked) timer=setTimeout(previsualisation,1)
    <!-- 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) -->
    }
    function automatique() {
    if (document.formulaire.auto.checked) previsualisation() <!-- si on a cocher la case d'    aperçu automatique -->
    }
    function code_to_html(t) {
    t=nl2khol(t)
    // balise Gras <!-- on lui dis que telles balises correspondent à tels codes en HTML -->
    t=deblaie(/([/gras])/g,t)
    t=remplace_tag(/[gras](.+)[/gras]/g,'<span style="font-weight: bold;">$1</span>',t) 
    t=remblaie(t)

    // balise Italic
    t=deblaie(/([/italic])/g,t)
    t=remplace_tag(/[italic](.+)[/italic]/g,'<span style="font-style: italic;">$1</span>',t) 
    t=remblaie(t)

    // balise Citation
    t=deblaie(/([/citation])/g,t)
    t=remplace_tag(/[citation=([sS]*?)](.+)[/citation]/g,'<strong>Citation $1 :</strong><div style="border: 1px solid #000000; width: 50%; font-family: Verdana, 'Trebuchet MS', Tahoma, 'Times New Roman', Times, serif; text-align: left; font-size: 11px;" align="center">$2</div>',t) 
    t=remblaie(t)

    // balise Image
    t=deblaie(/([/image])/g,t)
    t=remplace_tag(/[image](.+)[/image]/g,'<img src="$1" />',t)
    t=remblaie(t)

    // balise URL   
    t=deblaie(/([/url])/g,t)
    t=remplace_tag(/[url=([sS]*?)](.+)[/url]/g,'<a href="$1" target="_blank">$2</a>',t)
    t=remblaie(t)

    // smilies Smile <!-- on oublie pas les smilies -->
    t=remplace_tag(/:D/g,'<img src="http://siteduzero.com/Templates/images/smilies/smile.png" alt="" />',t) 
    t=remblaie(t)
    t=unkhol(t)
    t=nl2br(t)
    return t
    }
    <!-- tout le code qui suit c'est pour transformer toutes les balises, comme les preg_replace en PHP -->
    function deblaie(reg,t) {
    textarea=new String(t);
    return textarea.replace(reg,'    $1 ');
    }
    function remblaie(t) {
    textarea=new String(t);
    return textarea.replace(/ /g,'    ');
    }
    function remplace_tag(reg,rep,t) {
    textarea=new String(t);
    return textarea.replace(reg,rep);
    }
    function nl2br(t) {
    textarea=new String(t);
    return textarea.replace(/ /g,'    <br/>');
    }
    function nl2khol(t) {
    textarea=new String(t);
    return textarea.replace(/ /g,ptag);
    }
    function unkhol(t) {
    textarea=new String(t);
    return textarea.replace(new RegExp(ptag,'    g'),' ');
    }   
    • Partager sur Facebook
    • Partager sur Twitter
    Chahine
      19 août 2006 à 16:06:15

      Es-tu conscient qu'un tel bloc de code est dissuasif ?

      Aère-le, sélectionne les parties intéressantes... Fais quelque chose !
      • Partager sur Facebook
      • Partager sur Twitter
      s0ak
      • HTML / CSS
        19 août 2006 à 16:22:23

        ba je c'est pas comment tu veut que j'aère si je ne c'est même pas dans quel fichier l'erreur ce trouve et à quel endroit...
        • Partager sur Facebook
        • Partager sur Twitter
        Chahine
          19 août 2006 à 16:36:53

          Tu sépares les blocs d'instructions, tu indentes, tu décris précisemment l'erreur que tu obtiens, voire même tu mets une capture d'écran...
          • Partager sur Facebook
          • Partager sur Twitter
          s0ak
          • HTML / CSS
            19 août 2006 à 16:42:24

            ba c'est simple, la seul erreur que j'ais c'est que la prévisualisation ne fonctionne pas.^

            Regardez ici
            • Partager sur Facebook
            • Partager sur Twitter
            keisuke
              19 août 2006 à 17:00:28

              Salut,
              Remplace ce code:
              // balise Citation
              t=deblaie(/([/citation])/g,t)
              t=remplace_tag(/[citation=([sS]*?)](.+)[/citation]/g,'<strong>Citation $1 :</strong><div style="border: 1px solid #000000; width: 50%; font-family: Verdana, 'Trebuchet MS', Tahoma, 'Times New Roman', Times, serif; text-align: left; font-size: 11px;" align="center">$2</div>',t)

              par:
              // balise Citation
              t=deblaie(/([/citation])/g,t)
              t=remplace_tag(/[citation=([sS]*?)](.+)[/citation]/g,'<strong>Citation $1 :</strong><div style="border: 1px solid #000000; width: 50%; font-family: Verdana, \'Trebuchet MS\', Tahoma, \'Times New Roman\', Times, serif; text-align: left; font-size: 11px;" align="center">$2</div>',t)


              Voilà, je pense que ça sera bon après.

              Cordialement,
              Keisuke
              • Partager sur Facebook
              • Partager sur Twitter
              s0ak
              • HTML / CSS
                19 août 2006 à 18:07:54

                sa fonctionne toujours pas.. :(
                • Partager sur Facebook
                • Partager sur Twitter

                BBCode et aperçu en direct

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur ●
                • Markdown