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:

Fonction insertTag
Fonction si et - Guide
Fonction somme excel - Guide
Fonction moyenne excel - Guide
Fonction trier excel - Guide
Fonction couleur excel - Guide

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
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 ? )

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)

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
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...

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

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
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.

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

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
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 ??

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

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649 > vincent
21 janv. 2019 à 14:02

OK.
Donc, pour remédier à ton souci,
retire le ONSELECT qui se trouve sur ton TEXTAREA

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

Discussions similaires

comment contourner la fonction FILTRE

Message "cette fonction n'est pas disponible actuellement"

Comment savoir comment on nous a ajouté sur Snap

Fonction MS-DOS non valide

Remplir une cellule (texte) en fonction d'une autre (texte).

Discussions similaires

Newsletters