onkeypress modification: div->Textarea; Textarea->div

Bonjour,

Actuellement j'affiche dans un div un champ depuis une base php.

Code:

1
2
3
4
5
6
7
8
9
10
11
 
 
<div id="xx" contenteditable="true" onkeyup="refr2();">
        <?php
                        $sql = "SELECT TextePresentation FROM Menu2";
                        $result = $mysqli->query($sql);
                        $ligne = $result->fetch_assoc();
                        echo $ligne["TextePresentation"];
                        mysql_close($mysqli);
                ?>
    	</div>

puis plus bas dans un textarea j'affiche en javascript le même contenu (affichage en html):

Code:

1
2
3
4
5
6
7
8
9
10
11
 
	<script>
 
	function refr(){
		var text1 = document.getElementById("xx").innerHTML;	
		document.write("<textarea cols='80' rows='10' id='ta' onkeyup='refr3();'>" + text1 + "</textarea>");
	}
 
	refr();
 
	</script></td>

J'aimerai que lorsqu'on modifie le div en wysiwing (affichage texte) le textarea se modifie ---> Ceci fonctionne ---> OK

mais lorsque je modifie le textarea le contenu du div ne se modifie pas et en plus il change son mode d'affichage et affiche le code html.

Je vous met tout le code:

Code:

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
81
82
83
84
85
 
 
body {
	background-color: #2b3e53;
}
</style>
<link href="../css/mod.css" rel="stylesheet" type="text/css" />
<script language="javascript">
	function refr2(){
		document.getElementById('ta').innerHTML = document.getElementById("xx").innerHTML;		
	}
 
	function refr3(){
		document.getElementById('xx').innerHTML = document.getElementById("ta").innerHTML;		
	}
</script>
</head>
<body>
<form name="adPresentation" method="post" action="enrPresentation.php" enctype="multipart/form-data">
<table width="50%" border="0" align="center" class="arrondie" style="border:solid 1px #000000; background-color:#FFFFFF; background-image:url(../Contenu/images/fil_jol3.jpg); background-repeat: no-repeat; 	background-position: center bottom ;">
  <tr>
    <td colspan="2" align="center" valign="middle"><h2 class="vert"><a href="gestion.php"><img src="../Contenu/images/admin.png" width="101" height="26" border="0" align="absmiddle" /></a> Presentation</h2></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="31%" align="right"><b class="bleu">Image actuelle</b></td>
    <td width="50%"><img src="/admin/upload/imgPresentation.jpg" width="310" height="15" /></td>
  </tr>
  <tr>
    <td align="right" valign="top"><b class="rouge">Changer l'image</b></td>
    <td><input type="file" name="imgPresentation" id="imgPresentation" /></td>
  </tr>
  <tr>
    <td colspan="2"><hr width="55%" color="#CC6600" /></td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="right" valign="top"><b class="bleu">Texte</b></td>
    <td>
    	<div id="xx" contenteditable="true" onkeyup="refr2();">
        <?php
                        $sql = "SELECT TextePresentation FROM Menu2";
                        $result = $mysqli->query($sql);
                        $ligne = $result->fetch_assoc();
                        echo $ligne["TextePresentation"];
                        mysql_close($mysqli);
                ?>
    	</div>
  </td>
  </tr>
  <tr>
    <td>&nbsp;
    </td>
    <td> 
	<script>
 
	function refr(){
		var text1 = document.getElementById("xx").innerHTML;	
		document.write("<textarea cols='80' rows='10' id='ta' readonly='readonly' onkeyup='refr3();'>" + text1 + "</textarea>");
	}
 
	refr();
 
	</script></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="envoyé" id="envoyé" value="Mise à jour" style="cursor:pointer;"  /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>

merci d'avance pour votre réponse!