Hola, estoy haciendo (o intentado
) hacer una textarea con emoticones, botons para hacer el texto a negritas, cursivas, etc etc, como los que se usan aqui o en otros foros usando BBCode
Lo que es del lado de PHP creo que ya casi lo comprendo (remplazar [B] por <strong> por ejemplo) pero ahora me topo con que no se mucho de javascript.
Quiero que por ejemplo arriba del textarea estén los botones para convertir una parte de texto a negritas, cursiva, etc... asi que busqué la menera agregar texto al textarea y me encontré con esto [URL="http://www.mediacollege.com/internet/javascript/form/add-text.html"]http://www.mediacollege.com/internet/javascript/form/add-text.html[/URL].
Ya pude adaptar masomenos el codigo a mi idea usando como base ese tutorial, el problema es que al agregar texto lo hace al final.
Por ejemplo. En un textarea tengo 3 renglones escritos y quiero poner un
(B)(/B) en el 2do renglon, pero si presiono el boton de
B lo escribe hasta el ultimo renglon al final.
Otro problema es que no se como hacer que se detecten los Enters de manera que si tengo esos 3 renglones y los envio con PHP, se mantenga los renglones en vez de dejarlo todo junto en un solo renglon.
Esto es lo que llevo
Código Javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
//Negritas
function add_b() {
var negritas ="[B][/B]";
document.myform1.outputtext.value += negritas;
}
//Cursiva
function add_i() {
var negritas ="[I][/I]";
document.myform1.outputtext.value += negritas;
}
//Subrayado
function add_u() {
var negritas ="[U][/U]";
document.myform1.outputtext.value += negritas;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pruebas JS</title>
</head>
<body>
<form enctype="multipart/form-data" name="myform1" method="post">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300">
<input type="button" value="B" onclick="add_b()" >
<input type="button" value="I" onclick="add_i()" >
<input type="button" value="C" onclick="add_u()" >
</td>
<td width="300"> </td>
</tr>
<tr>
<td width="300"><textarea name="outputtext" cols="45" rows="5"></textarea></td>
<td width="300">Boton enviar</td>
</tr>
</table>
</form>
</body>
</html>
¿alguna sugerencia?