Menu

Afficher une prev bbcode [Résolu]

- - Dernière réponse :  vincent - 17 janv. 2019 à 17:13
Bonjour,

j’aimerais avoir une prev

j'ai le html texterea

<textarea class="global-nouveau-textarea" data-autoresize spellcheck="false" placeholder="décrivez ici votre problème : <nav><ul><li>donnez un maximum d'informations (logiciels version etc.....)</li><li>pas d'incitation au piratage, crack etc...</li><li>un bonjour et un merci font toujours plaisir.</li><li>svp, attendez 24 h afin de pouvoir repondre, et veuillez modifier votre sujet</li></ul></nav>" onkeyup="preview(this, 'previewDiv');" onselect="preview(this, 'previewDiv');" id="textarea"></textarea>

<button class="icon-button-previsualiser" id="button-previsualiser" type="button" onclick="previsualiser();">prévisualiser</button>



ensuite

	  <div class="global-select-normal select-nouveau choix">
	  <span class="hida1 choix-normal icon-select">couleur</span>
	  <nav class="mutliSelect1 select-nouveau"><ul>
	  <li style="color:#000000;" onclick="insertTag('<noir>', '</noir>', 'textarea')">noir</li>
	  <li style="color:#000099;" onclick="insertTag('<bleu>', '</bleu>', 'textarea')">bleu</li>
	  <li style="color:#162277;" onclick="insertTag('<bleu foncé>', '</bleu foncé>', 'textarea')">bleu foncé</li>
	  <li style="color:#A52A2A;" onclick="insertTag('<marron>', '</marron>', 'textarea')">marron</li>
	  <li style="color:#757575;" onclick="insertTag('<gris>', '</gris>', 'textarea')">gris</li>
	  <li style="color:#404040;" onclick="insertTag('<gris foncé>', '</gris foncé>', 'textarea')">gris foncé</li>
	  <li style="color:#808080;" onclick="insertTag('<gris clair>', '</gris clair>', 'textarea')">gris clair</li>
	  <li style="color:#FFD700;" onclick="insertTag('<or>', '</or>', 'textarea')">or</li>
	  <li style="color:#FF0000;" onclick="insertTag('<rouge>', '</rouge>', 'textarea')">rouge</li>
	  <li style="color:#177531;" onclick="insertTag('<vert foncé>', '</vert foncé>', 'textarea')">vert foncé</li>
	  <li style="color:#33CC00;" onclick="insertTag('<vert>', '</vert>', 'textarea')">vert</li>
	  <li style="color:#ff88f8;" onclick="insertTag('<rose>', '</rose>', 'textarea')">rose</li>
	  <li style="color:#CCCCCC;" onclick="insertTag('<argent>', '</argent>', 'textarea')">argent</li>
	  <li style="color:#FFFF00;" onclick="insertTag('<jaune>', '</jaune>', 'textarea')">jaune</li>
	  <li style="color:#F73DF7;" onclick="insertTag('<fushia>', '</fushia>', 'textarea')">fushia</li>
	  <li style="color:#CC33CC;" onclick="insertTag('<violet>', '</violet>', 'textarea')">violet</li>
	  <li style="color:#A7A700;" onclick="insertTag('<olive>', '</olive>', 'textarea')">olive</li>
	  <li style="color:#66FFFF;" onclick="insertTag('<azur>', '</azur>', 'textarea')">azur</li>
	  <li style="color:#FFC800;" onclick="insertTag('<orange>', '</orange>', 'textarea')">orange</li>
	  <li style="color:navy;" onclick="insertTag('<marine>', '</marine>', 'textarea')">marine</li>
	  <li style="color:aqua;" onclick="insertTag('<turquoise>', '</turquoise>', 'textarea')">turquoise</li>
	  </ul></nav></div>


et le code bbcode

function insertTag(startTag, endTag, textareaId, tagType) {
    var field = document.getElementById(textareaId);
    var scroll = field.scrollTop;
    field.focus();
    
    
    if (window.ActiveXObject) {
        var textRange = document.selection.createRange();            
        var currentSelection = textRange.text;
    } else {
        var startSelection   = field.value.substring(0, field.selectionStart);
        var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
        var endSelection     = field.value.substring(field.selectionEnd);
    }
    
    if (tagType) {
        switch (tagType) {
            case "lien":
                    endTag = "</lien>";
                    if (currentSelection) {
                            if (currentSelection.indexOf("http://") == 0 || currentSelection.indexOf("http://") == 0 || currentSelection.indexOf("ftp://") == 0 || currentSelection.indexOf("www.") == 0) {
                                    var label = prompt("Quel est le libellé du lien ?") || "";
                                    startTag = "<lien url=\"" + currentSelection + "\">";
                                    currentSelection = label;
                            } else {
                                    var URL = prompt("Quelle est l'url ?");
                                    startTag = "<lien url=\"" + URL + "\">";
                            }
                    } else {
                            var URL = prompt("Quelle est l'url ?") || "";
                            var label = prompt("Quel est le libellé du lien ?") || "";
                            startTag = "<lien url=\"" + URL + "\">";
                            currentSelection = label;                     
                    }
            break;
            case "citation":
                    endTag = "</citation>";
                    if (currentSelection) {
                            if (currentSelection.length > 30) {
                                    var auteur = prompt("Quel est l'auteur de la citation ?") || "";
                                    startTag = "<citation nom=\"" + auteur + "\">";
                            } else {
                                    var citation = prompt("Quelle est la citation ?") || "";
                                    startTag = "<citation nom=\"" + currentSelection + "\">";
                                    currentSelection = citation;    
                            }
                    } else {
                            var auteur = prompt("Quel est l'auteur de la citation ?") || "";
                            var citation = prompt("Quelle est la citation ?") || "";
                            startTag = "<citation nom=\"" + auteur + "\">";
                            currentSelection = citation;    
                    }
            break;    
        }
    }
    
    if (window.ActiveXObject) {
        textRange.text = startTag + currentSelection + endTag;
        textRange.moveStart('character', -endTag.length-currentSelection.length);
        textRange.moveEnd('character', -endTag.length);
        textRange.select();  
    } else { // Ce n'est pas IE
        field.value = startSelection + startTag + currentSelection + endTag + endSelection;
        field.focus();
        field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
    }  
    
    field.scrollTop = scroll;   
}

function preview(textareaId, previewDiv) {
    var field = textareaId.value;
    if (document.getElementById('previsualisation').checked && field) {
        
        var smiliesName = new Array(':magicien:', ':colere:', ':diable:', ':ange:', ':ninja:', '>_<', ':pirate:', ':zorro:', ':honte:', ':soleil:', ':\'\\(', ':waw:', ':\\)', ':D', ';\\)', ':p', ':lol:', ':euh:', ':\\(', ':o', ':colere2:', 'o_O', '\\^\\^', ':\\-°');
        var smiliesUrl  = new Array('magicien.png', 'angry.gif', 'diable.png', 'ange.png', 'ninja.png', 'pinch.png', 'pirate.png', 'zorro.png', 'rouge.png', 'soleil.png', 'pleure.png', 'waw.png', 'smile.png', 'heureux.png', 'clin.png', 'langue.png', 'rire.gif', 'unsure.gif', 'triste.png', 'huh.png', 'mechant.png', 'blink.gif', 'hihi.png', 'siffle.png');
        var smiliesPath = "http://www.siteduzero.com/Templates/images/smilies/";
    
        field = field.replace(/&/g, '&');
        field = field.replace(/</g, '<').replace(/>/g, '>');
        field = field.replace(/\n/g, '<br />').replace(/\t/g, '        ');
        
        field = field.replace(/<gras>([\s\S]*?)<\/gras>/g, '<strong>$1</strong>');
        field = field.replace(/<souligner>([\s\S]*?)<\/souligner>/g, '<u>$1</u>');
        field = field.replace(/<italique>([\s\S]*?)<\/italique>/g, '<em>$1</em>');
        field = field.replace(/<barre>([\s\S]*?)<\/barre>/g, '<s>$1</s>');
        field = field.replace(/<gauche>([\s\S]*?)<\/gauche>/g, '<left>$1</left>');
        field = field.replace(/<centrer>([\s\S]*?)<\/centrer>/g, '<center>$1</center>');
        field = field.replace(/<droite>([\s\S]*?)<\/droite>/g, '<right>$1</right>');
        field = field.replace(/<justifier>([\s\S]*?)<\/justifier>/g, '<justify>$1</justify>');
        field = field.replace(/<puce>([\s\S]*?)<\/puce>/g, '<nav><ul><li>$1</li></ul></nav>');
        field = field.replace(/<numero>([\s\S]*?)<\/numero>/g, '<nav><ol><li>$1</li></ol></nav>');
        field = field.replace(/<lien>([\s\S]*?)<\/lien>/g, '<a href="$1">$1</a>');
        field = field.replace(/<mail>([\s\S]*?)<\/mail>/g, '<mail>$1</mail>');
        field = field.replace(/<secret>([\s\S]*?)<\/secret>/g, '<secret>$1</secret>');
        field = field.replace(/<tableau>([\s\S]*?)<\/tableau>/g, '<table><tr><th>$1</th></tr></table>');
        field = field.replace(/<video>([\s\S]*?)<\/video>/g, '<video>$1</video>');
        field = field.replace(/<image>([\s\S]*?)<\/image>/g, '<img src="$1" alt="Image" />');
        field = field.replace(/<attention>([\s\S]*?)<\/attention>/g, '<attention>$1</attention>');
        field = field.replace(/<question>([\s\S]*?)<\/question>/g, '<question>$1</question>');
        field = field.replace(/<information>([\s\S]*?)<\/information>/g, '<information>$1</information>');
        field = field.replace(/<erreur>([\s\S]*?)<\/erreur>/g, '<erreur>$1</erreur>');
        field = field.replace(/<citation nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation : $1</span><div class="citation2">$2</div>');
        field = field.replace(/<citation lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation</a></span><div class="citation2">$2</div>');
        field = field.replace(/<citation nom=\"(.*?)\" lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$2">Citation : $1</a></span><div class="citation2">$3</div>');
        field = field.replace(/<citation lien=\"(.*?)\" nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation : $2</a></span><div class="citation2">$3</div>');
        field = field.replace(/<citation>([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation</span><div class="citation2">$1</div>');
        field = field.replace(/<semantique valeur=\"(.*?)\">([\s\S]*?)<\/semantique>/g, '<span class="$1">$2</span>');
        field = field.replace(/<couleur valeur=\"(.*?)\">([\s\S]*?)<\/couleur>/g, '<span class="$1">$2</span>');
        field = field.replace(/<flottant valeur=\"(.*?)\">([\s\S]*?)<\/flottant>/g, '<span class="$1">$2</span>');
        field = field.replace(/<police valeur=\"(.*?)\">([\s\S]*?)<\/police>/g, '<span class="$1">$2</span>');
		field = field.replace(/<taille valeur=\"(.*?)\">([\s\S]*?)<\/taille>/g, '<span class="$1">$2</span>');
        
        for (var i=0, c=smiliesName.length; i<c; i++) {
            field = field.replace(new RegExp(" " + smiliesName[i] + " ", "g"), " <img src=\"" + smiliesPath + smiliesUrl[i] + "\" alt=\"" + smiliesUrl[i] + "\" /> ");
        }
        
        document.getElementById(previewDiv).innerHTML = field;
    }
}

function getXMLHttpRequest() {
    var xhr = null;
    
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest();
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    
    return xhr;
}


function view(textareaId, viewDiv){
    var content = encodeURIComponent(document.getElementById(textareaId).value);
    var xhr = getXMLHttpRequest();
    
    if (xhr && xhr.readyState != 0) {
        xhr.abort();
        delete xhr;
    }
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200){
            document.getElementById(viewDiv).innerHTML = xhr.responseText;
        } else if (xhr.readyState == 3){
            document.getElementById(viewDiv).innerHTML = "<div style=\"text-align: center;\">Chargement en cours...</div>";
        }
    }
    
    xhr.open("POST", "view.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("string=" + content);
}



et j'ai mis

	  <!--début de cette parti sera caché-->
	  <div id="global-nouveau-previsualiser">
	  <legend>prévisualiser</legend>

	  <div class="nouveau-previsualiser" id="zone-previ"></div>
	  </div>
	  <!--fin de cette parti sera caché-->


avec

// previsualisation
function previsualiser(){
  var contenuTextArea = $("#nouv-msg").val();
  console.log(contenuTextArea); // pour voir dans la console du navigateur
  $("#zone-previ").html(contenuTextArea);
}

// afficher et masquer

$(document).ready(function(){
    $(document).on('click', function(){
         if($(this)[0].activeElement.id == "button-previsualiser"){
             $("#global-nouveau-previsualiser").css("display", "block");
         }
         else{
             $("#global-nouveau-previsualiser").css("display", "none");
         }
    }); 
 
    //on masque par defaut
    $("#global-nouveau-previsualiser").css("display", "none");
});



j'aimerais lorsqu'on tape un texte sur le textarea avec le bbcode gras

ca mets dans le <div class="nouveau-previsualiser" id="zone-previ"></div>


mais il ne mets pas mon texte dans la zone prevu

je vous mets le code view

<?php
 
//include "geshi/geshi.php"; 
 
function preview($texte){
     
    $texte = htmlentities($texte);
    $texte = preg_replace_callback("#<code=(.+)>(.*)
#siU", create_function('$matches', 'return code($matches[2], $matches[1]);'), $texte);
$texte = preg_replace("/<gras>(.*)<\/gras>/siU", "<span class=\"gras\">$1</span>", $texte);
$texte = preg_replace("/<italique>(.*)<\/italique>/siU", "<span class=\"italique\">$1</span>", $texte);
$texte = preg_replace("/<souligne>(.*)<\/souligne>/siU", "<span class=\"souligne\">$1</span>", $texte);
$texte = preg_replace("#<color=(red|green|purple|blue|yellow)>(.*)</color>#siU", "<span style=\"color:$1\">$2</span>", $texte);

$texte = mynl2br($texte);
return($texte);
}

function code($source, $language){

$source = html_entity_decode($source);
$code = new GeSHi($source, $language);
$parse = $code->parse_code();
$resultat = '<div>Code : '.$language.'<br/>'.$parse.'</div>';

return ($resultat);

}


function mynl2br($text) {
return strtr($text, array("\r\n" => '<br />', "\r" => '<br />', "\n" => '<br />'));
}


?>
</code>


merci, de m'aidé à trouver l'erreur pour quoi l ne met pas mon texte dans la zone prev lorsque je met un petit message

merci

pour info: je ne sais pas si ca vien du js ou php


Configuration: Windows / Chrome 71.0.3578.98
Afficher la suite 

Votre réponse

14 réponses

Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147
0
Merci
Bonjour,

Pas très clair.....
Tu dis :

mais il ne mets pas mon texte dans la zone prevu

Ca le met ailleurs.... ou ça ne le met nul part ??

As tu des choses qui s'affichent dans la console de ton navigateur ?


Et dans quel cas as tu le souci ? Lors du clic sur le bouton qui fait appel à la fonction : previsualiser
onclick="previsualiser();"

Ou lorsque tu écris dans le textarea, qui lui fait appel à la fonction : preview
via :
onkeyup="preview(this, 'previewDiv');" onselect="preview(this, 'previewDiv');



Et au passage.... Pourquoi mélanges tu du jquery et du pur javascript ?
Si tu fais du jquery.. autant faire ton ajax en jquery également..


en faite quand je met le texte normal ou en gras etc..

<textarea class="global-nouveau-textarea" data-autoresize spellcheck="false" placeholder="décrivez ici votre problème : <nav><ul><li>donnez un maximum d'informations (logiciels version etc.....)</li><li>pas d'incitation au piratage, crack etc...</li><li>un bonjour et un merci font toujours plaisir.</li><li>svp, attendez 24 h afin de pouvoir repondre, et veuillez modifier votre sujet</li></ul></nav>" onkeyup="preview(this, 'previewDiv');" onselect="preview(this, 'previewDiv');" id="textarea"></textarea>



ensuite, je clique sur

<button class="icon-button-previsualiser" id="button-previsualiser" type="button" onclick="previsualiser();">prévisualiser</button>



normalement , ca devrait afficher mon texte gras etc....

<div class="nouveau-previsualiser" id="zone-previ"></div>


mais il ne s'affiche pas mon texte

merci
jordane45
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147 -
Et je répète mes questions ...
As tu des choses dans la console ?
As tu essayé de voir si ça entrait bien dans la fonction ? (en y mettant un alert par exemple) ? Est-ce qu'il s'affiche ?
Commenter la réponse de jordane45
0
Merci
en faite, dans la console me dit lorsque je cliques

bbcode.js:73 Uncaught TypeError: Cannot read property 'checked' of null
    at preview (bbcode.js:73)
    at HTMLTextAreaElement.onkeyup (nouveau.php:215)


bbcode ligne 73

function preview(textareaId, previewDiv) {
    var field = textareaId.value;
    if (document.getElementById('previsualiser').checked && field) {


nouveau ligne 215

<textarea class="global-nouveau-textarea" data-autoresize spellcheck="false" placeholder="décrivez ici votre problème : <nav><ul><li>donnez un maximum d'informations (logiciels version etc.....)</li><li>pas d'incitation au piratage, crack etc...</li><li>un bonjour et un merci font toujours plaisir.</li><li>svp, attendez 24 h afin de pouvoir repondre, et veuillez modifier votre sujet</li></ul></nav>" onkeyup="preview(this, 'previewDiv');" onselect="preview(this, 'previewDiv');" id="textarea"></textarea>

quand je met une alert il ne veut pas afficher le texte dans la page mais il m'ouvre une fenetre alerte ;)

merci
Commenter la réponse de vincent
0
Merci
j'ecrit un message ici, mais il n’apparaît pas il me dit vous avez dejà posté ce message hors je ne vois pas
Commenter la réponse de vincent
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147
0
Merci
Tu as bien placé ton code a la fin de ta page juste avant le </body> ?
oui
j'ai bien mis tout les script avant le </body>

	  <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
	  <script src="http://monsite.legtux.org/V1/includes/jquery/select.js"></script>
	  <script src="http://monsite.legtux.org/V1/includes/jquery/navigation.js"></script>
<!--  <script src="http://monsite.legtux.org/V1/includes/jquery/mondale.js"></script>-->
	  <script src="http://monsite.legtux.org/V1/includes/js/masquer.js"></script>
	  <script src="http://monsite.legtux.org/V1/includes/jquery/textarea.js"></script>
	  <script src="http://monsite.legtux.org/V1/includes/js/previsualiser.js"></script>
	  <script src="http://monsite.legtux.org/V1/includes/js/bbcode.js"></script>
	  <script src="http://monsite.legtux.org/V1/includes/jquery/ouvert-fermer-forum.js"></script>
	  <script src="http://www.google.com/recaptcha/api.js"></script>
	  <?php include "includes/view.php"; ?>
jordane45
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147 -
Tu es sur...
Et le view.. a ton avis..il contient quoi...
pphp
mais avant 2010 lol il fonctionnait
Commenter la réponse de jordane45
0
Merci
mais bon ce n'est pas grave, j'ai trouvé un autre code qui marche mais j'ai juste une question,

<script type="text/javascript"> 

function insertTag(startTag, endTag, textareaId, tagType) {
        var field = document.getElementById(textareaId);
        var scroll = field.scrollTop;
        field.focus();
         
        /* === Partie 1 : on récupère la sélection === */
        if (window.ActiveXObject) {
                var textRange = document.selection.createRange();           
                var currentSelection = textRange.text;
        } else {
                var startSelection   = field.value.substring(0, field.selectionStart);
                var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
                var endSelection     = field.value.substring(field.selectionEnd);              
        }
         
         
        /* === Partie 2 : on analyse le tagType === */
        if (tagType) {
                switch (tagType) {
                        case "lien":
        endTag = "[/url]";
        if (currentSelection) { // Il y a une sélection
                if (currentSelection.indexOf("http://") == 0 || currentSelection.indexOf("http://") == 0 || currentSelection.indexOf("ftp://") == 0 || currentSelection.indexOf("www.") == 0) {
                        // La sélection semble être un lien. On demande alors le libellé
                        var label = prompt("Quel est le libellé du lien ?") || "";
                        startTag = "[url=" + currentSelection + "]";
                        currentSelection = label;
                } else {
                        // La sélection n'est pas un lien, donc c'est le libelle. On demande alors l'URL
                        var URL = prompt("Quelle est l'url ?");
                        startTag = "[url=" + URL + "]";
                }
        } else { // Pas de sélection, donc on demande l'URL et le libelle
                var URL = prompt("Quelle est l'url ?") || "";
                var label = prompt("Quel est le libellé du lien ?") || "";
                startTag = "[url=" + URL + "]";
                currentSelection = label;                    
        }
break;
 
                        case "citation":
        endTag = "</citation>";
        if (currentSelection) { // Il y a une sélection
                if (currentSelection.length > 30) { // La longueur de la sélection est plus grande que 30. C'est certainement la citation, le pseudo fait rarement 20 caractères
                        var auteur = prompt("Quel est l'auteur de la citation ?") || "";
                        startTag = "<citation nom=\"" + auteur + "\">";
                } else { // On a l'Auteur, on demande la citation
                        var citation = prompt("Quelle est la citation ?") || "";
                        startTag = "<citation nom=\"" + currentSelection + "\">";
                        currentSelection = citation;   
                }
        } else { // Pas de selection, donc on demande l'Auteur et la Citation
                var auteur = prompt("Quel est l'auteur de la citation ?") || "";
                var citation = prompt("Quelle est la citation ?") || "";
                startTag = "<citation nom=\"" + auteur + "\">";
                currentSelection = citation;   
        }
break;
 
                }
        }
         
        /* === Partie 3 : on insère le tout === */
        if (window.ActiveXObject) {
                textRange.text = startTag + currentSelection + endTag;
                textRange.moveStart("character", -endTag.length - currentSelection.length);
                textRange.moveEnd("character", -endTag.length);
                textRange.select();    
        } else {
                field.value = startSelection + startTag + currentSelection + endTag + endSelection;
                field.focus();
                field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
        }   
            field.scrollTop = scroll; // et on redéfinit le scroll.
 
}
function preview(textareaId, previewDiv) {
  
    var field = textareaId.value;
     var scroll = document.getElementById(previewDiv).scrollTop;
 
    if (document.getElementById('previsualisation').checked && field) {
         
        var smiliesName = new Array(':magicien:', ':colere:', ':diable:', ':ange:', ':ninja:', '>_<', ':pirate:', ':zorro:', ':honte:', ':soleil:', ':\'\\(', ':waw:', ':\\)', ':D', ';\\)', ':p', ':lol:', ':euh:', ':\\(', ':o', ':colere2:', 'o_O', '\\^\\^', ':\\-°');
        var smiliesUrl  = new Array('magicien.png', 'angry.gif', 'diable.png', 'ange.png', 'ninja.png', 'pinch.png', 'pirate.png', 'zorro.png', 'rouge.png', 'soleil.png', 'pleure.png', 'waw.png', 'smile.png', 'heureux.png', 'clin.png', 'langue.png', 'rire.gif', 'unsure.gif', 'triste.png', 'huh.png', 'mechant.png', 'blink.gif', 'hihi.png', 'siffle.png');
        var smiliesPath = "http://www.siteduzero.com/Templates/images/smilies/";
     
        field = field.replace(/&/g, '&');
        field = field.replace(/</g, '<').replace(/>/g, '>');
        field = field.replace(/\n/g, '<br />').replace(/\t/g, '        ');
         
        field = field.replace(/<gras>([\s\S]*?)<\/gras>/g, '<strong>$1</strong>');
        field = field.replace(/<italique>([\s\S]*?)<\/italique>/g, '<em>$1</em>');
        field = field.replace(/<souligne>([\s\S]*?)<\/souligne>/g, '<u>$1</u>');
        field = field.replace(/<lien>([\s\S]*?)<\/lien>/g, '<a href="$1">$1</a>');
        field = field.replace(/\[url=([\s\S]*?)\]([\s\S]*?)\[\/url\]/ig, '<a href="$1">$2</a>');
        field = field.replace(/\[img\]([\s\S]*?)\[\/img\]/ig, '<img src="$1" class="images_postees" alt="Image" />');
        field = field.replace(/<citation nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation : $1</span><div class="citation2">$2</div>');
        field = field.replace(/<citation lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation</a></span><div class="citation2">$2</div>');
        field = field.replace(/<citation nom=\"(.*?)\" lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$2">Citation : $1</a></span><div class="citation2">$3</div>');
        field = field.replace(/<citation lien=\"(.*?)\" nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation : $2</a></span><div class="citation2">$3</div>');
        field = field.replace(/<citation>([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation</span><div class="citation2">$1</div>');
        field = field.replace(/<taille valeur=\"(.*?)\">([\s\S]*?)<\/taille>/g, '<font size="$1">$2</font>');
        field = field.replace(/<position valeur=\"(.*?)\">([\s\S]*?)<\/position>/g, '<p align="$1">$2</p>');
        field = field.replace(/<titre1>([\s\S]*?)<\/titre1>/g, '<h2 class="titre1">$1</h2>');
        field = field.replace(/<titre2>([\s\S]*?)<\/titre2>/g, '<h3 class="titre2">$1</h3>');
        field = field.replace(/<information>([\s\S]*?)<\/information>/g, '<p class="information">$1</p>');
        field = field.replace(/<question>([\s\S]*?)<\/question>/g, '<p class="question">$1</p>');
        field = field.replace(/<attention>([\s\S]*?)<\/attention>/g, '<p class="attention">$1</p>');
        field = field.replace(/:ange:/ig, '<img src="../images/png/smilies/ange.png" />');
        field = field.replace(/:angry:/ig, '<img src="../images/png/smilies/angry.gif" />');
        field = field.replace(/:blink:/ig, '<img src="../images/png/smilies/blink.gif" />');
        field = field.replace(/:clin:/ig, '<img src="../images/png/smilies/clin.png" />');
        field = field.replace(/:diable:/ig, '<img src="../images/png/smilies/diable.png" />');
        field = field.replace(/:D/ig, '<img src="../images/png/smilies/heureux.png" />');
        field = field.replace(/:hihi:/ig, '<img src="../images/png/smilies/hihi.png" />');
        field = field.replace(/:huh:/ig, '<img src="../images/png/smilies/huh.png" />');
        field = field.replace(/:langue:/ig, '<img src="../images/png/smilies/langue.png" />');
        field = field.replace(/:magicien:/ig, '<img src="../images/png/smilies/magicien.png" />');
        field = field.replace(/:mechant:/ig, '<img src="../images/png/smilies/mechant.png" />');
        field = field.replace(/:ninja:/ig, '<img src="../images/png/smilies/ninja.png" />');
        field = field.replace(/:pinch:/ig, '<img src="../images/png/smilies/pinch.png" />');
        field = field.replace(/:pirate:/ig, '<img src="../images/png/smilies/pirate.png" />');
        field = field.replace(/:pleure:/ig, '<img src="../images/png/smilies/pleure.png" />');
        field = field.replace(/:lol:/ig, '<img src="../images/png/smilies/lol.gif" />');
        field = field.replace(/:rouge:/ig, '<img src="../images/png/smilies/rouge.png" />');
        field = field.replace(/:siffle:/ig, '<img src="../images/png/smilies/siffle.png" />');
        field = field.replace(/:\)/ig, '<img src="../images/png/smilies/smile.png" />');
        field = field.replace(/:soleil:/ig, '<img src="../images/png/smilies/soleil.png" />');
        field = field.replace(/:\(/ig, '<img src="../images/png/smilies/triste.png" />');
        field = field.replace(/:unsure:/ig, '<img src="../images/png/smilies/unsure.gif" />');
        field = field.replace(/:waw:/ig, '<img src="../images/png/smilies/waw.png" />');
        field = field.replace(/:zorro:/ig, '<img src="../images/png/smilies/zorro.png" />');
        field = field.replace(/<liste>([\s\S]*?)<\/liste>/g, '<ul>$1</ul>');
        field = field.replace(/(<br\s?\/>){0,}<puce>([\s\S]*?)<\/puce>(<br\s?\/>){0,}/g, '<li>$2</li>');
        field = field.replace(/\[color="(black|red|green|blue|yellow|purple|olive)"\]([\s\S]*?)\[\/color\]/g, '<span style="color:$1">$2</span>');
 
         
        for (var i=0, c=smiliesName.length; i<c; i++) {
            field = field.replace(new RegExp(" " + smiliesName[i] + " ", "g"), " <img src=\"" + smiliesPath + smiliesUrl[i] + "\" alt=\"" + smiliesUrl[i] + "\" /> ");
        }
        document.getElementById(previewDiv).innerHTML = field;
          
    }
 
document.getElementById(previewDiv).scrollTop = scroll;
}</script>


et html
<textarea type="text" name="contenu" onblur="verifContenu(this)" onkeyup="preview(this, 'previewDiv');" id="textarea" cols="64" rows="10" >bonjour</textarea>


là si je tape mon texte sur le texterea

il apparait bien

<div id="previewDiv" style="overflow:auto;" ></div>


a condition, de cocher

<p>
            <input title="cochez si vous voulez apercevoir votre texte" name="previsualisation" type="checkbox" id="previsualisation" value="previsualisation" />
            <label for="previsualisation">Prévisualisation automatique</label>
</p>



moi j'aimerais remplacer

<p>
            <input title="cochez si vous voulez apercevoir votre texte" name="previsualisation" type="checkbox" id="previsualisation" value="previsualisation" />
            <label for="previsualisation">Prévisualisation automatique</label>
</p>


par

<button class="icon-button-previsualiser" id="button-previsualiser" type="button" onclick="previsualisation();">prévisualiser</button>


mais quand je clique sur button le message n'apparaît pas car il faut toujours coché type="checkbox"

es-ce qu'il y a mouyen de dire

lors du clique sur button : le message apparait au lieux de coché la case input

merci
jordane45
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147 -
Comprends tu ce que tu écris comme code ou est-ce que tu te contentes seulement de faire des copier/coller ??

La fonction qui permet de "prévisualiser" se nomme : preview

Dans cette fonction, déclenchée lorsque tu écris dans le textarea via un
onkeyup="preview(this, 'previewDiv');"
actuellement, se trouve la ligne de code
if (document.getElementById('previsualisation').checked && field)

Cette ligne de code sert à vérifier si la checkbox est cochée ou non et ne déclenche donc la prévisualisation que si c'est le cas...

Si tu retires le champ html
<input title="cochez si vous voulez apercevoir votre texte" name="previsualisation" type="checkbox" id="previsualisation" value="previsualisation" />
il est normal que le code plante car il ne parvient plus à le trouver...

A la limite, on peut contourner le souci (tout en gardant la fonctionnalité d'origine disponible ) en modifiant deux trois trucs...

Au niveau de la fonction :


function preview(textareaId, previewDiv, force) {
    var f = typeof(force)!='undefined' && force != null ? force : false;
    var chkprevisualisation = document.getElementById('previsualisation');
    var field = textareaId.value;
    var scroll = document.getElementById(previewDiv).scrollTop;
    var previIschecked = typeof(chkprevisualisation)!='undefined' && chkprevisualisation!=null ? chkprevisualisation.checked : false;
    if ( field && (previIschecked || f)) {
         
      var smiliesName = new Array(':magicien:', ':colere:', ':diable:', ':ange:', ':ninja:', '>_<', ':pirate:', ':zorro:', ':honte:', ':soleil:', ':\'\\(', ':waw:', ':\\)', ':D', ';\\)', ':p', ':lol:', ':euh:', ':\\(', ':o', ':colere2:', 'o_O', '\\^\\^', ':\\-°');
      var smiliesUrl  = new Array('magicien.png', 'angry.gif', 'diable.png', 'ange.png', 'ninja.png', 'pinch.png', 'pirate.png', 'zorro.png', 'rouge.png', 'soleil.png', 'pleure.png', 'waw.png', 'smile.png', 'heureux.png', 'clin.png', 'langue.png', 'rire.gif', 'unsure.gif', 'triste.png', 'huh.png', 'mechant.png', 'blink.gif', 'hihi.png', 'siffle.png');
      var smiliesPath = "http://www.siteduzero.com/Templates/images/smilies/";
   
      field = field.replace(/&/g, '&');
      field = field.replace(/</g, '<').replace(/>/g, '>');
      field = field.replace(/\n/g, '<br />').replace(/\t/g, '        ');
       
      field = field.replace(/<gras>([\s\S]*?)<\/gras>/g, '<strong>$1</strong>');
      field = field.replace(/<italique>([\s\S]*?)<\/italique>/g, '<em>$1</em>');
      field = field.replace(/<souligne>([\s\S]*?)<\/souligne>/g, '<u>$1</u>');
      field = field.replace(/<lien>([\s\S]*?)<\/lien>/g, '<a href="$1">$1</a>');
      field = field.replace(/\[url=([\s\S]*?)\]([\s\S]*?)\[\/url\]/ig, '<a href="$1">$2</a>');
      field = field.replace(/\[img\]([\s\S]*?)\[\/img\]/ig, '<img src="$1" class="images_postees" alt="Image" />');
      field = field.replace(/<citation nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation : $1</span><div class="citation2">$2</div>');
      field = field.replace(/<citation lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation</a></span><div class="citation2">$2</div>');
      field = field.replace(/<citation nom=\"(.*?)\" lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$2">Citation : $1</a></span><div class="citation2">$3</div>');
      field = field.replace(/<citation lien=\"(.*?)\" nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation : $2</a></span><div class="citation2">$3</div>');
      field = field.replace(/<citation>([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation</span><div class="citation2">$1</div>');
      field = field.replace(/<taille valeur=\"(.*?)\">([\s\S]*?)<\/taille>/g, '<font size="$1">$2</font>');
      field = field.replace(/<position valeur=\"(.*?)\">([\s\S]*?)<\/position>/g, '<p align="$1">$2</p>');
      field = field.replace(/<titre1>([\s\S]*?)<\/titre1>/g, '<h2 class="titre1">$1</h2>');
      field = field.replace(/<titre2>([\s\S]*?)<\/titre2>/g, '<h3 class="titre2">$1</h3>');
      field = field.replace(/<information>([\s\S]*?)<\/information>/g, '<p class="information">$1</p>');
      field = field.replace(/<question>([\s\S]*?)<\/question>/g, '<p class="question">$1</p>');
      field = field.replace(/<attention>([\s\S]*?)<\/attention>/g, '<p class="attention">$1</p>');
      field = field.replace(/:ange:/ig, '<img src="../images/png/smilies/ange.png" />');
      field = field.replace(/:angry:/ig, '<img src="../images/png/smilies/angry.gif" />');
      field = field.replace(/:blink:/ig, '<img src="../images/png/smilies/blink.gif" />');
      field = field.replace(/:clin:/ig, '<img src="../images/png/smilies/clin.png" />');
      field = field.replace(/:diable:/ig, '<img src="../images/png/smilies/diable.png" />');
      field = field.replace(/:D/ig, '<img src="../images/png/smilies/heureux.png" />');
      field = field.replace(/:hihi:/ig, '<img src="../images/png/smilies/hihi.png" />');
      field = field.replace(/:huh:/ig, '<img src="../images/png/smilies/huh.png" />');
      field = field.replace(/:langue:/ig, '<img src="../images/png/smilies/langue.png" />');
      field = field.replace(/:magicien:/ig, '<img src="../images/png/smilies/magicien.png" />');
      field = field.replace(/:mechant:/ig, '<img src="../images/png/smilies/mechant.png" />');
      field = field.replace(/:ninja:/ig, '<img src="../images/png/smilies/ninja.png" />');
      field = field.replace(/:pinch:/ig, '<img src="../images/png/smilies/pinch.png" />');
      field = field.replace(/:pirate:/ig, '<img src="../images/png/smilies/pirate.png" />');
      field = field.replace(/:pleure:/ig, '<img src="../images/png/smilies/pleure.png" />');
      field = field.replace(/:lol:/ig, '<img src="../images/png/smilies/lol.gif" />');
      field = field.replace(/:rouge:/ig, '<img src="../images/png/smilies/rouge.png" />');
      field = field.replace(/:siffle:/ig, '<img src="../images/png/smilies/siffle.png" />');
      field = field.replace(/:\)/ig, '<img src="../images/png/smilies/smile.png" />');
      field = field.replace(/:soleil:/ig, '<img src="../images/png/smilies/soleil.png" />');
      field = field.replace(/:\(/ig, '<img src="../images/png/smilies/triste.png" />');
      field = field.replace(/:unsure:/ig, '<img src="../images/png/smilies/unsure.gif" />');
      field = field.replace(/:waw:/ig, '<img src="../images/png/smilies/waw.png" />');
      field = field.replace(/:zorro:/ig, '<img src="../images/png/smilies/zorro.png" />');
      field = field.replace(/<liste>([\s\S]*?)<\/liste>/g, '<ul>$1</ul>');
      field = field.replace(/(<br\s?\/>){0,}<puce>([\s\S]*?)<\/puce>(<br\s?\/>){0,}/g, '<li>$2</li>');
      field = field.replace(/\[color="(black|red|green|blue|yellow|purple|olive)"\]([\s\S]*?)\[\/color\]/g, '<span style="color:$1">$2</span>');

       
      for (var i=0, c=smiliesName.length; i<c; i++) {
        field = field.replace(new RegExp(" " + smiliesName[i] + " ", "g"), " <img src=\"" + smiliesPath + smiliesUrl[i] + "\" alt=\"" + smiliesUrl[i] + "\" /> ");
      }
      document.getElementById(previewDiv).innerHTML = field;   
    }
  document.getElementById(previewDiv).scrollTop = scroll;
}


Et au niveau de ton bouton :
faire appel à la fonction preview en passant comme dernier paramètre ( le "force" à true )
preview('textarea', 'previewDiv', true);
Commenter la réponse de vincent
0
Merci
merci, j'ai modifier, mais ca ne veut plus afficher le message ;)
jordane45
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147 -
Message dans la console ?
Et peux tu nous montrer le code complet ?
Commenter la réponse de vincent
0
Merci
j'espere que tu pourras cliquer sur le lien

http://codepen.io/anon/pen/QzYbRz

1/ si tu mets un texte sur le texterea et tu appuie sur prévisualisation tu vois un cadre apparaître mais sans ton texte.

2/ et si tu clique ailleur le cadre disparaît hors il devrait laisser le cadre prévisualisation

si tu clique sur les 3 boutton gras italique etc... il ne veut pas se mettre dans le texterea

3/ l console me dit :

Uncaught TypeError: Cannot read property 'scrollTop' of null
    at preview (nouveau.php:33)
    at HTMLTextAreaElement.onkeyup (nouveau.php:124)
nouveau.php:6 Uncaught TypeError: console.lpreviewDivog is not a function
    at previsualiser (nouveau.php:6)
    at HTMLButtonElement.onclick (nouveau.php:130)
2nouveau.php:6 Uncaught TypeError: console.lpreviewDivog is not a function
    at previsualiser (nouveau.php:6)
    at HTMLButtonElement.onclick (nouveau.php:130)
***@***:6
***@***:130



merci

si tu ne peut pas lire le lien je te mettrais le code ici
jordane45
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147 -
Direct une erreur ligne 4
  console.lpreviewDivog(contenuTextArea); // pour voir dans la console du navigateur


A remplacer par :

  console.log(contenuTextArea); // pour voir dans la console du navigateur
Commenter la réponse de vincent
0
Merci
ca ne marche as n, j’abandonne ;) car je ne veux pas te faire perdre ton temps ;)
Commenter la réponse de vincent
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147
0
Merci
<!DOCTYPE html>
<html>
 <head>
  <title> TEST </title>
  <meta charset="utf-8">
 </head>
 <body> 
	  <!--début du global du formulaire-->
	  <form id="global-nouveau" action="toto.php" method="post" >
	  <fieldset>

	  <!--début du cadre qui sera caché-->
	  <div id="global-nouveau-previsualiser">
	  <legend>prévisualiser</legend>

	  <div class="nouveau-previsualiser" id="zone-previ"></div>
	  </div>
	  <!--fin du cadre qui sera caché-->

	  <legend>nouveau mesage</legend>


	  <nav id="global-nouveau-button"><ul>
	  <li><button type="button" class="icon-button-gras" onclick="insertTag('<gras>', '</gras>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-souligner" onclick="insertTag('<souligner>', '</souligner>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-italique" onclick="insertTag('<italique>', '</italique>', 'textarea')"></button></li>
	  </ul></nav>



<textarea class="global-modifier-formulaire-textarea" data-autoresize spellcheck="false" placeholder="décrivez ici votre problème : 
<nav><ul><li>donnez un maximum d'informations (logiciels version etc.....)</li><li>pas d'incitation au piratage, crack etc...
</li><li>un bonjour et un merci font toujours plaisir.</li><li>svp, attendez 24 h afin de pouvoir repondre, et veuillez modifier votre sujet</li></ul></nav>" 
onkeyup="preview(this.id, 'zone-previ',true);" onselect="preview(this.id, 'zone-previ',true);" id="textarea"></textarea>




   	  <!--début du boutton de formulaire-->
      <nav id="global-panel-button-nouveau"><ul><li><button class="icon-button-previsualiser" id="button-previsualiser" type="button" onclick="previsualiser();">prévisualiser</button></li><li><button class="icon-button-ajouter" type="submit">envoyer</button></li></ul></nav>
	  <!--fin du boutton de formulaire-->

	  </fieldset>
	  </form>

<script
			  src="http://code.jquery.com/jquery-3.3.1.js"
			  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
			  crossorigin="anonymous"></script>
  <script type="text/javascript">
 // previsualisation
function previsualiser(){
  var contenuTextArea = $("#nouv-msg").val();
  console.log(contenuTextArea); // pour voir dans la console du navigateur
  //$("#previewDiv").html(contenuTextArea);
  preview("textarea", 'zone-previ',true);
}

// afficher et masquer

$(document).ready(function(){
    $(document).on('click', function(){
         if($(this)[0].activeElement.id == "button-previsualiser"){
             $("#global-nouveau-previsualiser").css("display", "block");
         }
         else{
             $("#global-nouveau-previsualiser").css("display", "none");
         }
    }); 
 
    //on masque par defaut
    $("#global-nouveau-previsualiser").css("display", "none");
});



function preview(textareaId, previewDiv, force) {
   // console.log(textareaId, previewDiv, force);
    var f = typeof(force)!='undefined' && force != null ? force : false;
    var chkprevisualisation = $('#previsualisation');
    var field = $("#"+textareaId).val();
    var scrollDiv = $("#"+previewDiv);
    if(typeof(scrollDiv)=='undefined' || scrollDiv==null){
      alert ('Erreur ! scrollDiv:' + previewDiv + ' inconnu !');
    }
    var scroll = scrollDiv.scrollTop;
    var previIschecked = typeof(chkprevisualisation)!='undefined' && chkprevisualisation!=null ? chkprevisualisation.checked : false;
    if ( field && (previIschecked || f)) {
         
      var smiliesName = new Array(':magicien:', ':colere:', ':diable:', ':ange:', ':ninja:', '>_<', ':pirate:', ':zorro:', ':honte:', ':soleil:', ':\'\\(', ':waw:', ':\\)', ':D', ';\\)', ':p', ':lol:', ':euh:', ':\\(', ':o', ':colere2:', 'o_O', '\\^\\^', ':\\-°');
      var smiliesUrl  = new Array('magicien.png', 'angry.gif', 'diable.png', 'ange.png', 'ninja.png', 'pinch.png', 'pirate.png', 'zorro.png', 'rouge.png', 'soleil.png', 'pleure.png', 'waw.png', 'smile.png', 'heureux.png', 'clin.png', 'langue.png', 'rire.gif', 'unsure.gif', 'triste.png', 'huh.png', 'mechant.png', 'blink.gif', 'hihi.png', 'siffle.png');
      var smiliesPath = "http://www.siteduzero.com/Templates/images/smilies/";
   
      field = field.replace(/&/g, '&');
      field = field.replace(/</g, '<').replace(/>/g, '>');
      field = field.replace(/\n/g, '<br />').replace(/\t/g, '        ');
       
      field = field.replace(/<gras>([\s\S]*?)<\/gras>/g, '<strong>$1</strong>');
      field = field.replace(/<italique>([\s\S]*?)<\/italique>/g, '<em>$1</em>');
      field = field.replace(/<souligne>([\s\S]*?)<\/souligne>/g, '<u>$1</u>');
      field = field.replace(/<lien>([\s\S]*?)<\/lien>/g, '<a href="$1">$1</a>');
      field = field.replace(/\[url=([\s\S]*?)\]([\s\S]*?)\[\/url\]/ig, '<a href="$1">$2</a>');
      field = field.replace(/\[img\]([\s\S]*?)\[\/img\]/ig, '<img src="$1" class="images_postees" alt="Image" />');
      field = field.replace(/<citation nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation : $1</span><div class="citation2">$2</div>');
      field = field.replace(/<citation lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation</a></span><div class="citation2">$2</div>');
      field = field.replace(/<citation nom=\"(.*?)\" lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$2">Citation : $1</a></span><div class="citation2">$3</div>');
      field = field.replace(/<citation lien=\"(.*?)\" nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation : $2</a></span><div class="citation2">$3</div>');
      field = field.replace(/<citation>([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation</span><div class="citation2">$1</div>');
      field = field.replace(/<taille valeur=\"(.*?)\">([\s\S]*?)<\/taille>/g, '<font size="$1">$2</font>');
      field = field.replace(/<position valeur=\"(.*?)\">([\s\S]*?)<\/position>/g, '<p align="$1">$2</p>');
      field = field.replace(/<titre1>([\s\S]*?)<\/titre1>/g, '<h2 class="titre1">$1</h2>');
      field = field.replace(/<titre2>([\s\S]*?)<\/titre2>/g, '<h3 class="titre2">$1</h3>');
      field = field.replace(/<information>([\s\S]*?)<\/information>/g, '<p class="information">$1</p>');
      field = field.replace(/<question>([\s\S]*?)<\/question>/g, '<p class="question">$1</p>');
      field = field.replace(/<attention>([\s\S]*?)<\/attention>/g, '<p class="attention">$1</p>');
      field = field.replace(/:ange:/ig, '<img src="../images/png/smilies/ange.png" />');
      field = field.replace(/:angry:/ig, '<img src="../images/png/smilies/angry.gif" />');
      field = field.replace(/:blink:/ig, '<img src="../images/png/smilies/blink.gif" />');
      field = field.replace(/:clin:/ig, '<img src="../images/png/smilies/clin.png" />');
      field = field.replace(/:diable:/ig, '<img src="../images/png/smilies/diable.png" />');
      field = field.replace(/:D/ig, '<img src="../images/png/smilies/heureux.png" />');
      field = field.replace(/:hihi:/ig, '<img src="../images/png/smilies/hihi.png" />');
      field = field.replace(/:huh:/ig, '<img src="../images/png/smilies/huh.png" />');
      field = field.replace(/:langue:/ig, '<img src="../images/png/smilies/langue.png" />');
      field = field.replace(/:magicien:/ig, '<img src="../images/png/smilies/magicien.png" />');
      field = field.replace(/:mechant:/ig, '<img src="../images/png/smilies/mechant.png" />');
      field = field.replace(/:ninja:/ig, '<img src="../images/png/smilies/ninja.png" />');
      field = field.replace(/:pinch:/ig, '<img src="../images/png/smilies/pinch.png" />');
      field = field.replace(/:pirate:/ig, '<img src="../images/png/smilies/pirate.png" />');
      field = field.replace(/:pleure:/ig, '<img src="../images/png/smilies/pleure.png" />');
      field = field.replace(/:lol:/ig, '<img src="../images/png/smilies/lol.gif" />');
      field = field.replace(/:rouge:/ig, '<img src="../images/png/smilies/rouge.png" />');
      field = field.replace(/:siffle:/ig, '<img src="../images/png/smilies/siffle.png" />');
      field = field.replace(/:\)/ig, '<img src="../images/png/smilies/smile.png" />');
      field = field.replace(/:soleil:/ig, '<img src="../images/png/smilies/soleil.png" />');
      field = field.replace(/:\(/ig, '<img src="../images/png/smilies/triste.png" />');
      field = field.replace(/:unsure:/ig, '<img src="../images/png/smilies/unsure.gif" />');
      field = field.replace(/:waw:/ig, '<img src="../images/png/smilies/waw.png" />');
      field = field.replace(/:zorro:/ig, '<img src="../images/png/smilies/zorro.png" />');
      field = field.replace(/<liste>([\s\S]*?)<\/liste>/g, '<ul>$1</ul>');
      field = field.replace(/(<br\s?\/>){0,}<puce>([\s\S]*?)<\/puce>(<br\s?\/>){0,}/g, '<li>$2</li>');
      field = field.replace(/\[color="(black|red|green|blue|yellow|purple|olive)"\]([\s\S]*?)\[\/color\]/g, '<span style="color:$1">$2</span>');

       
      for (var i=0, c=smiliesName.length; i<c; i++) {
        field = field.replace(new RegExp(" " + smiliesName[i] + " ", "g"), " <img src=\"" + smiliesPath + smiliesUrl[i] + "\" alt=\"" + smiliesUrl[i] + "\" /> ");
      }
      console.log("Nouvelle valeur field",field , 'previewDiv',previewDiv);
      $("#global-nouveau-previsualiser").show();
      $("#"+previewDiv).html(field);   
    }else{
      console.log('Erreur');
      console.log("Valeurs dans le if : ",field ,previIschecked , f)
    }
  scrollDiv.scrollTop = scroll;
}

      
  </script>
  </body>
</html>
Commenter la réponse de jordane45
0
Merci
Merci, pour ton code :

mais il y a juste 3 questions

1/ les balises gras italique etc.... ne se met pas dans le textarea.
2/ quand je met un texte ca s'affiche directement dans zone-previ au lieu que je clique sur le bouton en bas de la page.
3/ quand le message apparaît dans la zone-previ et si je cliques sur sur la page , mon cadre zone-previ disparaît.

4/ c'est à propos des smileys j'ai tester de mettre
field = field.replace(/smiley-1/ig, 'icon-smiley-1:before');

afin d'afficher les smileys des icon via sur ce site http://icomoon.io/app/#/select

quand je met dans le textarea smiley-1 dans la zone previ il met icon-smiley-1:before

si je met une image juste pour tester

field = field.replace(/:smileys1:/ig, '<img src="image/smileys/smileys1.jpg" />');


au lieu d'afficher mon smileys , il m'affiche :smileys1:



merci,
Commenter la réponse de vincent
0
Merci
j'ai resolu un souci c'est le point 4 mais neaumoins , il bug

      field = field.replace(/smiley-1/ig, '<span class="icon-smiley-1"></span>');
      field = field.replace(/smiley-2/ig, '<span class="icon-smiley-2"></span>');
      field = field.replace(/smiley-3/ig, '<span class="icon-smiley-3"></span>');
      field = field.replace(/smiley-4/ig, '<span class="icon-smiley-4"></span>');
      field = field.replace(/smiley-5/ig, '<span class="icon-smiley-5"></span>');
      field = field.replace(/smiley-6/ig, '<span class="icon-smiley-6"></span>');
      field = field.replace(/smiley-7/ig, '<span class="icon-smiley-7"></span>');
      field = field.replace(/smiley-8/ig, '<span class="icon-smiley-8"></span>');
      field = field.replace(/smiley-9/ig, '<span class="icon-smiley-9"></span>');
      field = field.replace(/smiley-10/ig, '<span class="icon-smiley-10"></span>');
      field = field.replace(/smiley-11/ig, '<span class="icon-smiley-11"></span>');
      field = field.replace(/smiley-12/ig, '<span class="icon-smiley-12"></span>');


si je mets dans le textaria : smiley-1 il m'affiche bien mon icon-smiley-1

mais par contre si je met dans le textaria smiley-10, il m'affiche le icon-smiley-1 avec 0 au lieu icon-smiley-10

en attendant ta réponse je vais essayer trouver le point 1 et 2

merci
jordane45
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147 -
normal...
Car dans smiley-10 ... il y a smiley-1
A la place de 1 ... il faudrait 01 -> smiley-01
là tu n'aurais plus ce souci.

Pour le point 2, il suffit de retirer les onkeypress et onkeyup de ton textarea.... ( tu ne sais pas à quoi ils servent ?? .. à déclencher la fonction lors de l'appuie ou le relâchement d'une touche du clavier... c'est pourtant une notion de base du langage... ça m'étonne que tu ne le saches pas ! )


Pour le point 1, ça vient certainement de ta fonction insertTag
mais ce n'est la question initiale qui concerne la prévisualisation... que nous sommes en train de traiter.
Commenter la réponse de vincent
0
Merci
Merci, j'ai enlever les onkeypress

et pour ca

onkeyup il n'a pas dans textarea

mais ca ne fait rien a chaque fois il supprime mon cadre ;)



pour le point 1

avant

<li style="color:#000000;" onclick="insertTag('<noir>', '</noir>', 'textarea')">noir</li>

function insertTag(startTag, endTag, textareaId, tagType) {


là ca fonctionait



mais comme on a modifier le js

function preview(textareaId, previewDiv, force) {


et j'ai tenter de modifier juste pour voir

<li style="color:#000000;" onclick="preview ('<noir>', '</noir>', 'textarea')">noir</li>

à mon vis c'est onclick qui fait buguer


pour ton info j'ai mis dans le textarea

data-autoresize spellcheck="false"

avec du jquery

(function($) {
  $.each($("textarea[data-autoresize]"), function() {
    var $this = $(this)
    var resizeTextarea = function(e) {
    	// Ajout pour compter la bordure
    	var offset = e.offsetHeight - e.clientHeight;
      e.style.height = e.scrollHeight + offset + "px"
    };

    $this.on("keyup input", function() {
      resizeTextarea(this)
    });

		var lastOverflowY = this.style.overflowY
    this.style.overflowY = "hidden"
    resizeTextarea(this)
    this.style.overflowY = lastOverflowY
  });
})(jQuery);


ca permet de taper du texte et ca fait augmenter la hauteur du textarea sans le scrool ;)
jordane45
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147 -
Oulaaaa.....



pour le fait que ça masque... tu as regardé dans ton code d'où ça pouvait venir ??


J'ai trouvé ....En 2 secondes... c'est marqué en toutes lettres....
// afficher et masquer

$(document).ready(function(){
    $(document).on('click', function(){
         if($(this)[0].activeElement.id == "button-previsualiser"){
             $("#global-nouveau-previsualiser").css("display", "block");
         }
         else{
             $("#global-nouveau-previsualiser").css("display", "none");
         }
    }); 

donc.. ben suffit de retirer
// afficher et masquer

$(document).ready(function(){
    



Et puis...

et j'ai tenter de modifier juste pour voir

<li style="color:#000000;" onclick="preview ('<noir>', '</noir>', 'textarea')">noir</li>

à mon vis c'est onclick qui fait buguer

Que vient faire la fonction preview dans ce bout de code ????

La fonction INSERTAG n'a rien à voir avec la fonction PREVIEW

je te rappel que ta question concernait la pévisualisation.
Je considère que le souci est traité.

Maintenant.. si tu as un problème avec la fonction insertag ..; je t'invite à ouvrir une nouvelle discussion propre à ce problème (après avoir mis en résolu celle-ci)
Commenter la réponse de vincent
0
Merci
si je suprime ceux que tu me dit $(document).ready(function(){
ca ne cache pas le cadre et ca ne veut plus s'ecrir ;)

mais ce n'est pas grave resolu ;)
jordane45
Messages postés
24104
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2019
2147 -
ce n'est pas le document ready qu'il faut supprimer... mais ce qu'il y avait en dessous.
Commenter la réponse de vincent
0
Merci
je met le code au cas ou s'il y a quelqu’un veut ;)

 // previsualisation
function previsualiser(){
  var contenuTextArea = $("#nouv-msg").val();
  console.log(contenuTextArea); // pour voir dans la console du navigateur
  //$("#previewDiv").html(contenuTextArea);
  preview("textarea", 'zone-previ',true);
}

// afficher et masquer

$(document).ready(function(){
						   
						   
						   
//     $(document).on('click', function(){
  //       if($(this)[0].activeElement.id == "button-previsualiser"){
    //         $("#global-nouveau-previsualiser").css("display", "block");
      //   }
        // else{
       //      $("#global-nouveau-previsualiser").css("display", "none");
      //   }
 //   }); 

    //on masque par defaut
    $("#global-nouveau-previsualiser").css("display", "none");
});
Commenter la réponse de vincent
2X Fiat Doblo Fiorino Punto Palio Bravo sunvisor mount bracket sun visor clips | Treatanaut | Kakumeiki Valvrave Season 2 BD Subtitle Indonesia