Discussion :

[Sergio_zero]

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.

[Beginner.]

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

[Sergio_zero]

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.

[SpaceFrog]

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

[Sergio_zero]

Bon temps pis.
Merci à vous deux.

[SpaceFrog]

Bon tant pis ...



Sion tu peux toujours ajouter un editeur de texte de type https://ckeditor.com/

[Beginner.]

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