Sujet Précédent Sujet Suivant

Afficher une prev bbcode

Résolu/Fermé
vincent - 12 janv. 2019 à 20:20
 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("https://") == 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

14 réponses

Réponse 1 / 14
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
12 janv. 2019 à 22:28
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..


0
vincent
13 janv. 2019 à 18:01
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
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
13 janv. 2019 à 18:20
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 ?
0
Réponse 2 / 14
vincent
13 janv. 2019 à 19:44
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
0
Réponse 3 / 14
vincent
Modifié par vincent le 13/01/2019 à 21:09
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
0
Réponse 4 / 14
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
13 janv. 2019 à 21:13
Tu as bien placé ton code a la fin de ta page juste avant le </body> ?
0
vincent
13 janv. 2019 à 22:30
oui
j'ai bien mis tout les script avant le </body> 

	  <script src="https://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="https://www.google.com/recaptcha/api.js"></script>
	  <?php include "includes/view.php"; ?>
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
13 janv. 2019 à 23:41
Tu es sur...
Et le view.. a ton avis..il contient quoi...
0
vincent
14 janv. 2019 à 00:29
pphp
mais avant 2010 lol il fonctionnait
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
vincent
14 janv. 2019 à 12:00
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("https://") == 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
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
14 janv. 2019 à 12:17
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);
0
Réponse 6 / 14
vincent
14 janv. 2019 à 13:23
merci, j'ai modifier, mais ca ne veut plus afficher le message ;)
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
14 janv. 2019 à 13:34
Message dans la console ?
Et peux tu nous montrer le code complet ?
0
Réponse 7 / 14
vincent
14 janv. 2019 à 17:17
j'espere que tu pourras cliquer sur le lien

https://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
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
14 janv. 2019 à 17:38
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
0
Réponse 8 / 14
vincent
14 janv. 2019 à 19:59
ca ne marche as n, j’abandonne ;) car je ne veux pas te faire perdre ton temps ;)
0
Réponse 9 / 14
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
14 janv. 2019 à 20:45 
<!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="https://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>
0
Réponse 10 / 14
vincent
14 janv. 2019 à 23:49
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 https://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,
0
Réponse 11 / 14
vincent
15 janv. 2019 à 13:57
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
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
15 janv. 2019 à 14:21
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.
0
Réponse 12 / 14
vincent
16 janv. 2019 à 01:39
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 ;)
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
16 janv. 2019 à 07:19
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)
0
Réponse 13 / 14
vincent
16 janv. 2019 à 14:40
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 ;)
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
16 janv. 2019 à 14:51
ce n'est pas le document ready qu'il faut supprimer... mais ce qu'il y avait en dessous.
0
Réponse 14 / 14
vincent
17 janv. 2019 à 17:13
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");
});
0

Discussions similaires

programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses
Où sont affichés les FPS Minecraft
Guerric -
malekpe -

9 réponses