Fonction insertTag

Résolu
Bonjour,

j'ai mis ce html

<button type="button" class="icon-button-gras" onclick="insertTag('<gras>', '</gras>', 'textarea')"></button>


quand je cliques sur ce bouton, il ne se met pas dans le textarea

<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>" onselect="preview(this.id, 'zone-previ',true);" id="textarea"></textarea>


je te mets la page bbcode

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.monsite.com/images/smilies/";
   
      field = field.replace(/&/g, '&');
      field = field.replace(/</g, '<').replace(/>/g, '>');
      field = field.replace(/\n/g, '         ').replace(/\t/g, '        ');
       
      // début de la page des bouttons
      // début du mots en gas
	  field = field.replace(/<gras>([\s\S]*?)<\/gras>/g, '<p class="gras">$1</p>');
      // fin du mots en gas
	  // début du mots en souligner
      field = field.replace(/<souligner>([\s\S]*?)<\/souligner>/g, '<p class="souligner">$1</p>');
	  // fin du mots en souligner
	  // début du mots en italique
	  field = field.replace(/<italique>([\s\S]*?)<\/italique>/g, '<p class="italique">$1</p>');
	  // fin du mots en italique




      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, #global-modifier-previsualiser, #global-repondre-previsualiser, #global-annonce-previsualiser, #global-biographie-previsualiser, #global-signature-previsualiser").show();
      $("#"+previewDiv).html(field);   
    }else{
      console.log('Erreur');
      console.log("Valeurs dans le if : ",field ,previIschecked , f)
    }
  scrollDiv.scrollTop = scroll;
}


et au cas ou

 // 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, #global-modifier-previsualiser, #global-repondre-previsualiser, #global-annonce-previsualiser, #global-biographie-previsualiser, #global-signature-previsualiser").css("display", "none");
});


mon but c'est de cliquer sur le boutton gras et qui met dans le textarea mot gras

je pense que ca vient du onclick="insertTag

merci

Configuration: Windows / Chrome 71.0.3578.98

5 réponses

  1. Modérateur
    Bonsoir,

    t'es encore la dessus ?

    Quoi qu'il en soit,
    1 - Le code Javascript que tu nous montres n'est pas complet.... il n'y a pas la fonction InsertTag dedans...

    2 - Encore une fois, je t'invite à commencer à regarder dans la console du navigateur pour voir ce qu'il s'y passe.... as tu des messages d'erreur ? (si oui.. lesquels ? )

    1. oui, comme n a modifier le code

      c'est toi qui m'a dit je t'invite a créer un topic , moi j'excute ;)

      mon erreur console

      Failed to load resource: the server responded with a status of 404 (Not Found)
      nouveau.php:234 Uncaught ReferenceError: insertTag is not defined
          at HTMLLIElement.onclick (nouveau.php:234)
      1. Modérateur
        je n'avais modifié que le code concerné par ta précédente question il fallait bien entendu conserver les autres parties du code...
    2. autemp pour moi,

      mais quand je met

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


      et je clique sur <button type="button" class="icon-button-gras" onclick="insertTag('', '', 'textarea')"></button>

      ca met bien dans textarea mais par contre ca m'ouvre le cadre zone-previ ;)

      il penses que je clique sur le boutton ;)
      1. Modérateur
        IL n'y a rien dans le bout de code que tu nous montres qui puisse afficher la zone de previ..
        Il faudrait donc que tu nous repostes l'intégralité de ton code actuel.
    3. bonjour

      le bouton gras

      <button type="button" class="icon-button-gras" onclick="insertTag('<gras>', '</gras>', 'textarea')"></button>


      quand je cliques il mets bien dans la balise textarea

      <textarea class="global-nouveau-textarea" data-autoresize spellcheck="false" placeholder="<gras>mot gras</gras></li></ul></nav>" onselect="preview(this.id, 'zone-previ',true);" id="textarea"></textarea>


      lorsque je clique sur le boutton gras il me fait ouvrir ce cadre caché

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


      hors moi je veux juste qu'il m'ouvre après avoir cliquer sur ce

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


      a mon avis c'est du à la fonction insertTag qui me fait ouvrir le cadre

      voilà la bcode.js

      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, 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.monsite.com/images/smilies/";
         
            field = field.replace(/&/g, '&');
            field = field.replace(/</g, '<').replace(/>/g, '>');
            field = field.replace(/\n/g, '         ').replace(/\t/g, '        ');
             
            // début de la page des bouttons
            // début du mots en gas
      	  field = field.replace(/<gras>([\s\S]*?)<\/gras>/g, '<p class="gras">$1</p>');
            // fin du mots en gas
      	  // début du mots en souligner
            field = field.replace(/<souligner>([\s\S]*?)<\/souligner>/g, '<p class="souligner">$1</p>');
      	  // fin du mots en souligner
      	  // début du mots en italique
      	  field = field.replace(/<italique>([\s\S]*?)<\/italique>/g, '<p class="italique">$1</p>');
      	  // fin du mots en italique
      
      
      
      
            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, #global-modifier-previsualiser, #global-repondre-previsualiser, #global-annonce-previsualiser, #global-biographie-previsualiser, #global-signature-previsualiser").show();
            $("#"+previewDiv).html(field);   
          }else{
            console.log('Erreur');
            console.log("Valeurs dans le if : ",field ,previIschecked , f)
          }
        scrollDiv.scrollTop = scroll;
      }
      


      et ma previsualisation

       // 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, #global-modifier-previsualiser, #global-repondre-previsualiser, #global-annonce-previsualiser, #global-biographie-previsualiser, #global-signature-previsualiser").css("display", "none");
      });
      


      comment éviter que la boite dialogue zone-prev ouvre quand on clique sur boutton gras

      et bien entendu on ouvre la boite dialogue zone div après avoir cliqué sur le boutton previsualisation ;)

      peut être qu'il faut forcé le code pour évité d'ouvrir le cadre dans fonction insertTag
      1. Modérateur
        Cela vient du "onselect" que tu as mis sur ton textarea
        onselect="preview(this.id, 'zone-previ',true);"
        

        Et comme ton script insertTag ... fait un select justement ...
        textRange.select();  
        

        Normal....

        Dis voir .... tu comprends les lignes de code que tu utilises ou tu copie/colle bêtement des trucs trouvés au hasard sur le net ??
      2. je suis honnete ;)

        a l'époque c'est qqun qui m'a fait enfin j'ai copier coler lol biensur après j'ai modifier moi même un ou 2 truc ;)

        mais j'essaye de comprendre mis j'ai du mal à comprendre lol
      3. Modérateur
        @vincentOK.
        Donc, pour remédier à ton souci,
        retire le ONSELECT qui se trouve sur ton TEXTAREA