Bonsoir à tous!

Je suis en train de créer un éditeur wysiwyg, et mon code fonctionne mal. Pour une raison qui m'est inconnue, lorsque j'appelle ma fonction insertTag() depuis un onclick dans le HTML, tout va bien. A l'inverse, quand l'appel passe via la méthode .click(), rien ne va.
Auriez vous des idées?

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>WYSIWYG</title>
</script>
</head>
<body>
<div id="main">
	<div>
		<p>
			<input type="button" value="G" id="gras"></input>
			<input type="button" value="I" onclick="insertTag('&lt;italique&gt;', '&lt;/italique&gt;', 'textarea')" />
		</p>	
	</div>	
	<textarea id="textarea" cols="150" rows="10"></textarea>
	<div id="previewDiv"></div>
</div>
<script src="jQuery.js"></script>
<script src="wysiwyg.js"></script>
</body>
</html>

Code javascript : 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
 
	$(document).ready(function () {
		$("#gras").on("click", function() {
			insertTag("&lt;gras&gt;, &lt;/gras&gt;, textarea");
		});
	});
	function insertTag(startTag, endTag, textareaId, tagType) {
		var field = document.getElementById(textareaId);
		var scroll = field.scrollTop;
		field.focus();
		var startSelection   = field.value.substring(0, field.selectionStart);
		var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
		var endSelection     = field.value.substring(field.selectionEnd);
		field.value = startSelection + startTag + currentSelection + endTag + endSelection;
		field.focus();
		field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
	}  	
 
	function preview(textareaId) {
		var field = textareaId.value;
		field = field.replace(/&/g, '&amp;');
		field = field.replace(/</g, '&lt;').replace(/>/g, '&gt;');
		field = field.replace(/\n/g, '<br />').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');	
		field = field.replace(/&lt;gras&gt;([\s\S]*?)&lt;\/gras&gt;/g, '<strong>$1</strong>');
		field = field.replace(/&lt;italique&gt;([\s\S]*?)&lt;\/italique&gt;/g, '<em>$1</em>');
		document.getElementById("previewDiv").innerHTML = field;
		console.log(field);
	}
 
	var area = document.getElementById("textarea");
	preview(area);

Merci d'avance!