IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Colorer des balises dans un textarea


Sujet :

JavaScript

  1. #1
    Membre régulier
    Homme Profil pro
    Educateur spécialisé
    Inscrit en
    janvier 2012
    Messages
    176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Educateur spécialisé
    Secteur : Santé

    Informations forums :
    Inscription : janvier 2012
    Messages : 176
    Points : 101
    Points
    101
    Par défaut Colorer des balises dans un textarea
    Bonjour à tous et à toutes,
    J'utilise en script en js et xml qui fonctionne très bien pour créer des pages sur mon site (un peu comme le système du forum) mais dans un souci de lecture j'aurais aimé colorer les balises ouvrantes et fermantes mais j'ai beau essayer plein de truc, rien ne fonctionne.
    Si quelqu'un pouvait m'aider ça serait cool.
    Voici mon code js qui ajoute les balises dans le textarea

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    $(window).load(function () { init() } ); // appel de la fonction d'init en fin de chargement de page
    var txtareaHeight = 200; // hauteur par défaut du textarea
    function init() {
    	$('#btn_apercu').live('click', charge_zcode );  // Demande de chargement de l'aperçu
    	//gestion de la hauteur du textarea
    	$('#txtarea_hauteur_plus').live('click', function() { txtareaHeight=txtareaHeight+50; $("#zcodearea").css("height", txtareaHeight) } ); 
    	$('#txtarea_hauteur_moins').live('click', function() { if(txtareaHeight>249) {txtareaHeight=txtareaHeight-50; $("#zcodearea").css("height", txtareaHeight)} } ); 
    }
    // Appel AJAX pour le chargement de l'aperçu
    function charge_zcode() {
    	$.post('apercu.php', { 'zcode':$("#zcodearea").attr('value') }, function(data) { $("#apercu").html(data);  });
    }
    // Insertion d'une balise simple dans le textarea
    function balise(a,b) {
    	$('#zcodearea').wrapSelection(a,b);
    }
    // Insertion d'une liste dans le textarea
    function add_liste() {
    	var c="";
    	while(tmp=prompt("Saisir le contenu d'une ligne (si vous voulez arrêter ici, cliquez sur annuler)")) {
    		c+="<puce>"+tmp+"</puce>\n";
    	}
    	balise("<liste>\n"+c,"</liste>");
    }
    // Insertion d'une balise avec paramètre dans le textarea
    function add_bal(a,b,c) {
    	if($("#zcodearea").getSelection().length) {
    		$('#zcodearea').wrapSelection("<"+a+" "+b+"=\""+$("#"+c).val()+"\">","</"+a+">");
    	}	else {
    		$('#zcodearea').insertAtCaretPos2("<"+a+" "+b+"=\""+$("#"+c).val()+"\"></"+a+">");
    	}
    	$("#"+c+" .opt_titre").attr("selected","selected");
    }
     
    // Insertion d'une balise de type citation, lien, email dans le textarea (demande des infos complémentaires)
    function add_bal2(a,b) {
    	if(a=="lien") {
    		if($("#zcodearea").getSelection().length) {
    			var txt = $("#zcodearea").getSelection().text;
    			if(txt.indexOf("https://")==0||txt.indexOf("https://")==0||txt.indexOf("ftp://")==0||txt.indexOf("apt://")==0) {
    				var c = prompt("Veuillez indiquer le texte du lien","");
    				$('#zcodearea').wrapSelection("<"+a+" "+b+"=\"","\">"+c+"</"+a+">");			
    			}
    			else {
    				var c = prompt("Veuillez indiquer l'url du lien","");
    				if(!(txt.indexOf("https://")==0||txt.indexOf("https://")==0||txt.indexOf("ftp://")==0||txt.indexOf("apt://")==0)) { c = "https://"+c; }
    				$('#zcodearea').wrapSelection("<"+a+" "+b+"=\""+c+"\">","</"+a+">");
    			}
    		}
    		else {
    			var c = prompt("Veuillez indiquer l'url du lien","");
    			var d = prompt("Veuillez indiquer le texte du lien","");
    			if(!(c.indexOf("https://")==0||c.indexOf("https://")==0||c.indexOf("ftp://")==0||c.indexOf("apt://")==0)) { c = "https://"+c; }
    			if($.trim(d)!="") $('#zcodearea').insertAtCaretPos2("<"+a+" "+b+"=\""+c+"\">"+d+"</"+a+">");
    			else $('#zcodearea').insertAtCaretPos2("<"+a+" "+b+"=\""+c+"\">"+c+"</"+a+">");
    		}
    	}
    	else if(a=="email") {
    		if($("#zcodearea").getSelection().length) {
    			var patternMail = /^[0-9a-zA-Z\._-]+@[0-9a-zA-Z\._-]+\.[0-9a-zA-Z]+$/
    			var txt = $("#zcodearea").getSelection().text;
    			if(txt.match(patternMail)) {
    				var c = prompt("Veuillez indiquer le nom (facultatif)","");
    				if($.trim(c)!="") { $('#zcodearea').wrapSelection("<"+a+" "+b+"=\"","\">"+c+"</"+a+">");	}
    				else { $('#zcodearea').wrapSelection("<"+a+">","</"+a+">"); }
    			}
    			else {
    			var c = prompt("Veuillez indiquer l'email","");
    			if($.trim(c)!="") { $('#zcodearea').wrapSelection("<"+a+" "+b+"=\""+c+"\">","</"+a+">");	}
    			}
    		}
    		else {
    			var c = prompt("Veuillez indiquer l'email","");
    			var d = prompt("Veuillez indiquer le nom (facultatif)","");
    			if($.trim(d)=="") $("#zcodearea").insertAtCaretPos("<"+a+">"+c+"</"+a+">");
    			else $("#zcodearea").insertAtCaretPos2("<"+a+" "+b+"=\""+c+"\">"+d+"</"+a+">");
    		}
     
    	}
    }
    Merci de votre aide.

  2. #2
    Membre expert
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    2 615
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 2 615
    Points : 3 434
    Points
    3 434
    Par défaut
    Salut,

    Je crois (à confirmer ou infirmer) qu'on ne peut pas utiliser différentes couleurs dans une textearea*... Mais es-tu obligé d'utiliser une textearea ?

    Certains ont utilisé une textearea pour faire des éditeurs de code avec coloration syntaxique: une textearea pour saisir le texte et une simple div pour la coloration, les deux doivent être superposées...

    Mais aujourd'hui j'utiliserais plutôt une simple div rendue éditable via l’attribut contenteditable...

  3. #3
    Membre régulier
    Homme Profil pro
    Educateur spécialisé
    Inscrit en
    janvier 2012
    Messages
    176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Educateur spécialisé
    Secteur : Santé

    Informations forums :
    Inscription : janvier 2012
    Messages : 176
    Points : 101
    Points
    101
    Par défaut
    Bonjour Beginner et merci de ton aide.
    Je pense qu'il est possible de modifier la couleur du texte dans un textarea car si je rajoute
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('zcodearea').style.color = 'red';
    à la fin de mon code, tout le texte devient rouge.
    Il faudrait juste que j'arrive à cibler les balises mais la je n'y arrive pas.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 035
    Points : 65 493
    Points
    65 493
    Billets dans le blog
    1
    Par défaut
    Tu ne peux pas colorer différentes balsies dasn le textarea avc différentes couleurs, comme tu as pu le constater c'est totu ou rien ...
    Il faut passer par une autre balise pour l'affichage, par exemple un div voir en content editable...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Membre régulier
    Homme Profil pro
    Educateur spécialisé
    Inscrit en
    janvier 2012
    Messages
    176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Educateur spécialisé
    Secteur : Santé

    Informations forums :
    Inscription : janvier 2012
    Messages : 176
    Points : 101
    Points
    101
    Par défaut
    Bon temps pis.
    Merci à vous deux.

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 035
    Points : 65 493
    Points
    65 493
    Billets dans le blog
    1
    Par défaut
    Bon tant pis ...



    Sion tu peux toujours ajouter un editeur de texte de type https://ckeditor.com/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  7. #7
    Membre expert
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    2 615
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 2 615
    Points : 3 434
    Points
    3 434
    Par défaut
    Citation Envoyé par Sergio_zero Voir le message
    Bon temps pis.
    Merci à vous deux.
    Ben encore une fois tu pourrais utiliser une simple div rendue éditable via l’attribut contenteditable (clique sur le lien, il y a un exemple que tu peux tester...).

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Entourer un texte par des balises dans un textarea a la maniere d'un bbcode
    Par kilian67 dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 04/06/2009, 04h33
  2. Insérer des balises dans un textarea
    Par cilies38 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 07/05/2009, 12h13
  3. Afficher des balises dans un textarea
    Par gailup dans le forum Langage
    Réponses: 5
    Dernier message: 26/06/2006, 23h02
  4. [html/css]coloration des options dans un select
    Par the_edge dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 04/05/2005, 16h19
  5. [XSL] Traiter des balises dans un mixed
    Par Je@nb dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 10/02/2005, 20h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo