Mise forme du texte dans une TEXTAREA

**aertys** · 08/02/2015, 19h09

bonjour,
j'essaie de créer une boite de texte avec des boutons pour changer la mise en forme du texte

html:

Code html :

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
<!DOCTYPE html5>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->
	<head>
    <meta http-equiv="content-type"	charset="UTF-8" content="text/html">
    <title>MESSAGE</title>
    <link href="css/styles/reset.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/styles/page.css">
	  <link rel="shortcut icon" type="image/png"  href="favicon.png" />
	  <meta name="viewport" content="width=device-width">
		<!--[if lt IE 9]>
	    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
    	<section>
    	<nav>
    		<button id="maj"><img src="img/btn/uppercase.jpg" width="45" height="45" alt=""></button>
    		<button id="min"><img src="img/btn/minuscule.jpg" width="45" height="45" alt=""></button>
    		<button id="b"><img src="img/btn/bold.jpg" width="45" height="45" alt=""></button>
    		<button id="u"><img src="img/btn/underliined.jpg" width="45" height="45" alt=""></button>
    		<button id="i"><img src="img/btn/iitalic.jpg" width="45" height="45" alt=""></button>
    		<button id="pmaj"><img src="img/btn/smallcaps.jpg" width="45" height="45" alt=""></button>
    		<button id="r"><img src="img/btn/red.jpg" width="45" height="45" alt=""></button>
    		<button id="l_t"><img src="img/btn/line_through.jpg" width="45" height="45" alt=""></button>
    	</nav>
    	<form>
		<textarea id="t" rows="15" cols="70"></textarea>    	
    	</form>
    	</section>
		<script type="text/javascript" src="js/script.js"></script>
	</body>
</html>

js:

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
var text_sel;
 
    function addEvent(element, event, func) { // Une fonction pour gérer les événements sous tous les navigateurs
        if (element.attachEvent) {
            element.attachEvent ('on' + event, func);
        } 
        else {
            element.addEventListener (event, func, false);
        }
    };
 
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
} 
 
var t = document.getElementById('t');
addEvent (t, 'select', function () {
     text_sel = getSelected();
     var ts = text_sel.style;
     var maj = document.gettElementById('maj');
     addEvent (maj, 'click', function () {
         ts.textTransform = 'uppercase';
     });
     var min = document.gettElementById('min');
     addEvent (min, 'click', function () {
         ts.textTransform = 'lowercase';
     });
     var pmaj = document.gettElementById('pmaj');
     addEvent (pmaj, 'click', function () {
         ts.fontVariant = 'smalllcaps';
     });
     var b = document.gettElementById('b');
     addEvent (b, 'click', function () {
         ts.fontWeight = 'bold';  
     });
     var u = document.gettElementById('u');
     addEvent (u, 'click', function () {
         ts.textDecoration = 'underline':
     });
     var i = document.gettElementById('i');
     addEvent (i, 'click', function () {
         ts.fontStyle = 'italic';
     });
     var r = document.gettElementById('r');
     addEvent (r, 'click', function () {
         ts.color = 'red';
     });
     var l_t = document.gettElementById('l_t');
     addEvent (l_t, 'click', function () {
         ts.textDecoration = 'line-through';
     });
});

**NoSmoking** · 08/02/2015, 20h54

Bonjour,
sans parler des erreurs dans ton code, tu ne pourras rien faire au niveau de la mise en format du contenu de ta TEXTAREA, elle n'est pas prévue pour cela.

**aertys** · 13/02/2015, 10h21

Salut,

excuse-moi mais je ne comprends pas comment la prévoir pour ça

et si il y a des erreurs, j'aimerais bien les connaître

**sekaijin** · 13/02/2015, 11h56

le textarea est un composant standard du html destiné à editer du texte brut et que du texte brut
aucune mise en forme.

pour éditer avec mise en forme il te faut un éditeur ad-hoc
pour cela voir
http://en.wikipedia.org/wiki/Online_rich-text_editor
A+JYT

**Watilin** · 13/02/2015, 13h58

Envoyé par aertys

et si il y a des erreurs, j'aimerais bien les connaître

Pas de soucis

<!DOCTYPE html5> n'existe pas. C'est <!DOCTYPE html>. L'absence de numéro de version dans le doctype est intentionnelle.

**Bovino** · 13/02/2015, 14h15

Il y en a d'autres dans la partie JavaScript.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
text_sel = getSelected();
var ts = text_sel.style;

La fonction getSelected() renvoie une chaine, or une chaine ne possède pas de propriété style.
D'autre part, la même fonction est susceptible de renvoyer un booléen, tu dois donc tester ce que tu récupères.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var maj = document.gettElementById('maj');

get pas gett.

**aertys** · 16/02/2015, 18h56

j'ai corrigé mes codes, suis allé voir des sites sur les rich text editors,mais je ne comprends toujours pas comment m'en servir. Pouvez-vous m’éclairer?

**NoSmoking** · 17/02/2015, 16h47

Que dire de plus que choisis en un et suis les instructions, tutoriels et documentation fournis.

Si par la suite tu rencontres un problème précis dans ce cas on tachera de t'aider.

Mise forme du texte dans une TEXTAREA

JavaScript

Discussions similaires

Partager

Partager