Sujet Précédent Sujet Suivant

Fonction insertTag

Résolu/Fermé
vincent - 20 janv. 2019 à 21:02
 vincent - 21 janv. 2019 à 21:51
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
A voir également:

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38424 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 février 2025 4 734
20 janv. 2019 à 22:29
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
Réponse 2 / 5
vincent
20 janv. 2019 à 23:38
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
jordane45 Messages postés 38424 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 février 2025 4 734
20 janv. 2019 à 23:49
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
Réponse 3 / 5
vincent
21 janv. 2019 à 01:11
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
jordane45 Messages postés 38424 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 février 2025 4 734
21 janv. 2019 à 10:11
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
Réponse 4 / 5
vincent
21 janv. 2019 à 11:34
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
jordane45 Messages postés 38424 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 février 2025 4 734
21 janv. 2019 à 12:06
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
vincent
21 janv. 2019 à 13:26
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
jordane45 Messages postés 38424 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 février 2025 4 734 > vincent
21 janv. 2019 à 14:02
OK.
Donc, pour remédier à ton souci,
retire le ONSELECT qui se trouve sur ton TEXTAREA
0

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

Posez votre question
Réponse 5 / 5
vincent
21 janv. 2019 à 21:51
Merci, ca marche
0

Discussions similaires

La fonction FILTRE n'est plus reconnue
Auri328 -
Auri328 -

3 réponses
Remplir une cellule (texte) en fonction d'une autre (texte).
SOMUM -
SOMUM -

4 réponses
Comment savoir comment on nous a ajouté sur Snap
Laura -
Lob6 -

15 réponses
comment contourner la fonction FILTRE
Gabby -
DjiDji59430 -

3 réponses
Excel : colorer une cellule sous condition d'une autre ?
KAKEPATHEL -
Pascal -

15 réponses