Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] Problème avec la prévisualisation instantannée

Un ou deux petits soucis, rien de bien méchant

    29 décembre 2005 à 3:33:46

    Bonjour, alors je me suis basé sur les codes js du sdz pour comprendre le fonctionnement de leur script de prévisualisation instantannée et me faire une idée plus précise de la méthode à suivre, mais j'ai deux soucis:
    1) Je ne parviens pas à dissocier deux BBcode identique, je veux dire par éxemple que si j'entre:
    [b]sdfsdf[/b] [i]sdfsdf[/i] [b]sdfsdf[/b]
    J'ai affiché:
    sdfsdf[/b] sdfsdf [b]sdfsdf
    2) Je ne parviens pas à faire déscendre la scrollbare du div de prévisualisation automatiquement lorsque le texte entré nécessite un défilement, en clair si l'on tape un méssage qui sort du div la scrollbare ne déscend pas, donc on ne vois plus ce que l'on tape et là je sèche un peut pour résoudre le problème.

    J'attends vos sugestions et votre aide avec impatience.

    [EDIT] J'allais oublier mon code:
    /*
            Auteur: the angel
            Dernière mise à jours:
            Mail: the_angel@hotmail.fr
            Si vous trouvez des bugs, merci de les signaler
           
            Code inspiré de celui du Site du Zéro: http://siteduzero.com
    */


    var compteur = 0;

    /*
            Fonction appeler lors du changement du statut de la checkbox régulant l'affichage du div de prévisualisation en temps réel
            Arguments:  - id_div_prev -> Contient l'id du div dans lequel est affiché la prévisualisation en temps réel
    */

    function hidden(id_div_prev)
    {
            if (document.getElementById(id_div_prev).style.display == '')
                    document.getElementById(id_div_prev).style.display = 'none';
            else if (document.getElementById(id_div_prev).style.display == 'none')
                    document.getElementById(id_div_prev).style.display = '';
    }

    /*
            Fonction appeler lors de l'ajout de lettre dans le textarea
            Arguments:  - id_textarea -> Contient l'id du textarea dans lequel on tape le texte
                                    - id_div_prev -> Contient l'id du div dans lequel est affiché la prévisualisation en temps réel
                                    - id_box_prev -> Contient l'id de la checkbox permettant l'affichage ou non du div de prévisualisation
    */

    function pre_parse(id_textarea, id_div_prev, id_box_prev)
    {
            if (document.getElementById(id_box_prev).checked)
            {
                    clearTimeout(compteur);
                    compteur = setTimeout("pparse('" + id_textarea + "', '" + id_div_prev + "')", 100);
                   
            }
    }

    /*
            Fonction appeler lors de l'ajout de lettre dans le textarea par l'intermédiaire de la fonction pre_parse
            Arguments:  - id_textarea -> Contient l'id du textarea dans lequel on tape le texte
                                    - id_div_prev -> Contient l'id du div dans lequel est affiché la prévisualisation en temps réel
    */

    function pparse(id_textarea, id_div_prev)
    {
            var textarea = document.getElementById(id_textarea);
            var div_prev = document.getElementById(id_div_prev);
            var text = textarea.value;
           
            text = rreplace('<','&lt;', text);
            text = rreplace('>','&gt;', text);
           
            text = rreplace("\n", '<br />', text);
           
            text = text.replace(/\[b\]([\s\S]+)\[\/b\]/gi, '<strong>$1</strong>');
            text = text.replace(/\[i\]([\s\S]+)\[\/i\]/gi, '<em>$1</em>');
            text = text.replace(/\[o\]([\s\S]+)\[\/o\]/gi, '<span style="text-decoration: overline;">$1</span>');
            text = text.replace(/\[s\]([\s\S]+)\[\/s\]/gi, '<span style="text-decoration: line-through;">$1</span>');
            text = text.replace(/\[u\]([\s\S]+)\[\/u\]/gi, '<span style="text-decoration: underline;">$1</span>');
           
            text = text.replace(/\[url\]((http:\/\/|ftp:\/\/|https:\/\/)?(.+\.)*(.{2,4})(.+)?)\[\/url\]/gi, '<a href="$1" title="$1">$1</a>');
            text = text.replace(/\[url=((http:\/\/|ftp:\/\/|https:\/\/)?(.+\.)*(.{2,4})(.+)?)\]([\s\S]+)\[\/url\]/gi, '<a href="$1" title="$1">$2</a>');
           
            text = text.replace(/\[e?mail\]([\s\S]+)\[\/e?mail\]/gi, '<a href="mailto: $1" title="Envoyer un mail &agrave: $1">$1</a>');
            text = text.replace(/\[e?mail=([\s\S]+)\]([\s\S]+)\[\/e?mail\]/gi, '<a href="mailto: $1" title="Envoyer un mail &agrave: $1">$2</a>');
           
            text = text.replace(/\[img\]((http:\/\/|https:\/\/)?(.+\.)*(.{2,4})(.+)?)\[\/img\]/gi, '<img src="$1" alt="$1" />');
            text = text.replace(/\[img=((http:\/\/|https:\/\/)?(.+\.)*(.{2,4})(.+)?)\]/gi, '<img src="$1" alt="$1" />');
           
           
            text = text.replace(/\[align=(left|center|right|justify)\]([\s\S]+)\[\/align\]/gi, '<div style="text-align: $1;">$2</div>');
            text = text.replace(/\[font=([\d]+)\]([\s\S]+)\[\/font\]/gi, '<span style="font-size: $1px;">$2</span>');
            text = text.replace(/\[size=([\d]+)\]([\s\S]+)\[\/size\]/gi, '<span style="font-size: $1px;">$2</span>');
            text = text.replace(/\[color=(red|green|yellow|blue|purple|olive)\]([\s\S]+)\[\/color\]/gi, '<span style="color: $1;">$2</span>');
            text = text.replace(/\[fond=(red|green|yellow|blue|purple|olive)\]([\s\S]+)\[\/fond\]/gi, '<span style="background-color: $1;">$2</span>');
           
            text = text.replace(/\[php\]([\s\S]+)\[\/php\]/gi, '<em style="font-style: italic;">$1</em>');
           
            var i = 0;
                    while ((text.search(/\[quote=([\s\S]+)\]([\s\S]+)\[\/quote\]/gi) != -1 || text.search(/\[quote\]([\s\S]+)\[\/quote\]/gi) != -1) && i < 20)
                    {
                            text = text.replace(/\[quote=([\s\S]+)\]([\s\S]+)\[\/quote\]/gi, '<br /><span class="quote_gras">Citer </span class="quote_gras"><em>($1)</em><span class="quote_gras"> :</span class="quote_gras"><blockquote><pre>$2</pre></blockquote>');
                            text = text.replace(/\[quote\]([\s\S]+)\[\/quote\]/gi, '<br /><span class="quote_gras">Citer :</span><blockquote><pre>$1</pre></blockquote>');
                            i++;
                    }
           
            div_prev.innerHTML = text;
    }

    function rreplace(string_needle, string_replace, string_haystack)
    {
            while (string_haystack.indexOf(string_needle) > -1) //Tant que l'on trouve le caractère ou la chaîne de caractère à remplacer, on utilise trictement supérieur à moins 1 au lieu de supérieur ou égal à 0 pour une question de rapidité (tout du moins en php, du coup ;) )
            {
                    string_haystack = string_haystack.substring(0, string_haystack.indexOf(string_needle)) + string_replace + string_haystack.substring ((string_haystack.indexOf(string_needle) + string_needle.length), string_haystack.length);
            }
            return string_haystack;
    }
    • Partager sur Facebook
    • Partager sur Twitter
      29 décembre 2005 à 17:15:52

      Bon bha je tente une dernière fois après je vous laisse tranquil.
      • Partager sur Facebook
      • Partager sur Twitter

      [JS] Problème avec la prévisualisation instantannée

      × 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