Fonction insertTag

Résolu
vincent -  
 vincent -
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.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    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 ? )

    0
  2. vincent
     
    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)
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      je n'avais modifié que le code concerné par ta précédente question il fallait bien entendu conserver les autres parties du code...
      0
  3. vincent
     
    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 ;)
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      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.
      0
  4. vincent
     
    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
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      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 ??
      0
    2. vincent
       
      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
      0
      1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832 > vincent
         
        OK.
        Donc, pour remédier à ton souci,
        retire le ONSELECT qui se trouve sur ton TEXTAREA
        0

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

    Posez votre question

Discussions similaires

Message "cette fonction n'est pas disponible actuellement"
daladala -
Lucaslebg -

15 réponses
Message récurrent sur TV LG LED HD
bullshitt -
ghsi med -

5 réponses
Fonction MS-DOS non valide
Phoenix78 -
avo9900 -

6 réponses
Message sur tv LG
Patou -
MPMP10 -

2 réponses
Remplir cellule si l'autre se fait remplir
TheCrazyMod -
TheCrazyMod -

5 réponses