afficher une prev bbcode Résolu

Question

Bonjour, j’aimerais avoir une prev j'ai le html texterea ensuite

couleur

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 = ""; 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 = ""; currentSelection = label; } else { var URL = prompt("Quelle est l'url ?"); startTag = ""; } } else { var URL = prompt("Quelle est l'url ?") || ""; var label = prompt("Quel est le libellé du lien ?") || ""; startTag = ""; currentSelection = label; } break; case "citation": endTag = ""; if (currentSelection) { if (currentSelection.length > 30) { var auteur = prompt("Quel est l'auteur de la citation ?") || ""; startTag = ""; } else { var citation = prompt("Quelle est la citation ?") || ""; startTag = ""; currentSelection = citation; } } else { var auteur = prompt("Quel est l'auteur de la citation ?") || ""; var citation = prompt("Quelle est la citation ?") || ""; startTag = ""; 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, '>'); field = field.replace(/\n/g, '
').replace(/\t/g, ' '); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, ''); field = field.replace(/([\s\S]*?)/g, ''); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '

$1

'); field = field.replace(/

/g, '

'); field = field.replace(/([\s\S]*?)/g, '

'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '$1'); field = field.replace(/([\s\S]*?)/g, '
Citation : $1

$2

'); field = field.replace(/([\s\S]*?)/g, '
Citation

$2

'); field = field.replace(/([\s\S]*?)/g, '
Citation : $1

$3

'); field = field.replace(/([\s\S]*?)/g, '
Citation : $2

$3

'); field = field.replace(/([\s\S]*?)/g, '
Citation

$1

'); field = field.replace(/([\s\S]*?)/g, '$2'); field = field.replace(/([\s\S]*?)/g, '$2'); field = field.replace(/([\s\S]*?)/g, '$2'); field = field.replace(/([\s\S]*?)/g, '$2'); field = field.replace(/([\s\S]*?)/g, '$2'); for (var i=0, c=smiliesName.length; 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 = "

Chargement en cours...

"; } } xhr.open("POST", "view.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("string=" + content); } et j'ai mis

prévisualiser

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

mais il ne mets pas mon texte dans la zone prevu je vous mets le code view (.*)#siU", create_function('$matches', 'return code($matches[2], $matches[1]);'), $texte); $texte = preg_replace("/(.*)/siU", "$1", $texte); $texte = preg_replace("/(.*)/siU", "$1", $texte); $texte = preg_replace("/(.*)/siU", "$1", $texte); $texte = preg_replace("#(.*)#siU", "$2", $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 = '

Code : '.$language.'
'.$parse.'

'; return ($resultat); } function mynl2br($text) { return strtr($text, array("\r\n" => '
', "\r" => '
', "\n" => '
')); } ?> 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

jordane45 · Answer

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..

vincent · Answer

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 quand je met une alert il ne veut pas afficher le texte dans la page mais il m'ouvre une fenetre alerte ;) merci

vincent · Answer

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

jordane45 · Answer

Tu as bien placé ton code a la fin de ta page juste avant le ?

vincent · Answer

mais bon ce n'est pas grave, j'ai trouvé un autre code qui marche mais j'ai juste une question, et html là si je tape mon texte sur le texterea il apparait bien

a condition, de cocher

Prévisualisation automatique

moi j'aimerais remplacer

Prévisualisation automatique

par 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

vincent · Answer

merci, j'ai modifier, mais ca ne veut plus afficher le message ;)

vincent · Answer

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

vincent · Answer

ca ne marche as n, j’abandonne ;) car je ne veux pas te faire perdre ton temps ;)

jordane45 · Answer

<!DOCTYPE html>
<html>
 <head>
  <title> TEST </title>
  <meta charset="utf-8">
 </head>
 <body> 
	  
	  <form id="global-nouveau" action="toto.php" method="post" >
	  <fieldset>

<div id="global-nouveau-previsualiser">
	  <legend>prévisualiser</legend>

<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>

<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>

</fieldset>
	  </form>

// 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");
});

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>

vincent · Answer

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,

vincent · Answer

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

vincent · Answer

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

noir

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

noir

à 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 ;)

vincent · Answer

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 ;)

vincent · Answer

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");
});

Afficher une prev bbcode

14 réponses

Discussions similaires

Newsletters