Pseudo éditeur WYSIWYG qui a de la peine avec les retours à la ligne [Résolu]

Signaler
Messages postés
4
Date d'inscription
jeudi 4 mai 2006
Statut
Membre
Dernière intervention
2 avril 2008
-
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Bonjour.

Je cherche à développer un éditeur WYSIWYG (What You See Is What You Get) pour que les membres puissent voir l'effet que produit leur texte en direct.
J'ai donc cherché, et trouvé, une fonction qui correspondait bien à ce que je cherche, c'est à dire de la prévisualisation avec du BBCode.

Voici le code en question:
function afficher(texte)
{
        var div_prev = document.getElementById('prevision');
        var corps = document.getElementById('corps').value;
        corps = corps.replace(/\[b\]([\s\S]*?)\[\/b\]/g, ' $1 ');
        corps = corps.replace(/\[i\]([\s\S]*?)\[\/i\]/g, ' $1 ');
        corps = corps.replace(/\[s\]([\s\S]*?)\[\/s\]/g, '<s>$1</s>');
 
           div_prev.innerHTML = corps;
}
Précisons au passage quelques petites choses: "prevision" est l'endroit où va être affichée la prévisualisation et corps est un textarea en HTML.
Les deux éléments sont sur la même page HTML et le code est bien entre des balises script.

Tout s'affiche merveilleusement bien, sauf un petit point noir: Le retour à la ligne.
J'ai essayé et essayé mais je n'ai pas encore réussi à tomber sur le bon code.

Voici un de mes essais (qui ne marche pas):
corps = corps.replace(/ /\n /g, '
');
Le but est donc de remplacer tous les \n (retours à la ligne en JS) par des br (retours à la ligne en HTML)

Dans le but que vous arriviez à me dépanner plus facilement, je me permet de vous communiquer l'ensemble du code qui ne joue pas. (pas d'inquiétude, ce n'est pas long )
<textarea name="corps" id="corps" cols="50" rows="10" onkeyup="javascript:afficher(document.getElementById('corps').value);" tabindex="3"></textarea>

    <fieldset id="prevoir"><legend>Prévisualisation</legend>

</fieldset>

<script>
function afficher(texte)
{
        var div_prev = document.getElementById('prevision');
        var corps = document.getElementById('corps').value;
        corps = corps.replace(/\[b\]([\s\S]*?)\[\/b\]/g, ' $1 ');
        corps = corps.replace(/\[i\]([\s\S]*?)\[\/i\]/g, ' $1 ');
        corps = corps.replace(/\[s\]([\s\S]*?)\[\/s\]/g, '<s>$1</s>');
        corps = corps.replace(/ \\n /g, '
');
 
           div_prev.innerHTML = corps;
}
</script>
Merci d'avance pour toutes les réponses qui pourront m'être utiles. Si vous souhaitez de plus amples informations sur le code, n'hésitez pas à demander

Cordialement,
WebManiaK

4 réponses

Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
il fallaitt lire : corps = corps.replace(/\n/g, '
'
);   ( espace en trop )
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
Bonjour,

    c'est pas du wysiwyg ça....
       puisqu'il va falloir envoyer vers le serveur pour qu'il réaffiche correctement !
       c'est pas que j'ai quelque chose contre, mais c'est du bbCode, pas du wysiwyg
          avec lequel on voit immédiatement, sans passer par le serveur.

       ici, dans ce forum, c'est du wysiwyg  libre d'utiluisation d'ailleurs
        ( et tu as de nombreux exemples  partout, tiens.. le mien )

    mais bon....

    corps = corps.replace( /\n / g, '
');
    ou même corps = corps.replace(/\r\n /g, '
');   ( avec IE peut-être ? )

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
4
Date d'inscription
jeudi 4 mai 2006
Statut
Membre
Dernière intervention
2 avril 2008

Merci infiniment pour tes réponses, ça marche très bien.
Merci également pour le lien vers du véritable WYSIWYG, et désolé pour mon abus de langage.

Cordialement,
WebManiaK.
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
y'a pas d'quoi être désolé.
nickel si ça baigne, merci de nous l'avoir dit,
    je préfère le "vrai wysiwig" qui comme on l'emploie est
    aussi un abus de langage :  what you see is what you get employé à l'origine
    pour évoquer que ce qu'on voit, à l'écran, sera ce qu'on obtiendra, à l'imprimante.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]