Fonction insertTag

Résolu

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

Afficher la suite

A voir également:

Fonction insertTag
Fonction si et - Guide
Fonction miroir - Guide
Fonction moyenne excel - Guide
Fonction remplacer sur word - Guide
Fonction somme excel - Guide

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > vincent

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

Merci, ca marche

Discussions similaires

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

Message "cette fonction n'est pas disponible actuellement"

La fonction FILTRE n'est plus reconnue

[Excel 2010] Remplir cellule d'après contenu d'une autre

Excel : Remplir une cellule en fonction d'une autre

Votre réponse

Discussions similaires