Agregar texto a textarea con JavaScr + boton y detectar Enters (para pag tipo BBCode)

thetwister · #1 (**permalink**) 20/02/2013, 22:11

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">&nbsp;</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?

capa · #2 (**permalink**) 21/02/2013, 01:56

Hola :D, lo que buscascas creo que es esto

http://www.disegnocentell.com.ar/notas2.php?id=131

fijate en el ejemplo, saludos.

thetwister · #3 (**permalink**) 25/02/2013, 16:19

Cita:

Iniciado por capa

Hola :D, lo que buscascas creo que es esto

[url]http://www.disegnocentell.com.ar/notas2.php?id=131[/url]

fijate en el ejemplo, saludos.

Amigo, eso es exactamente lo que necesitaba para guiarme. Ya logré modificarlo un poco para comprenderlo bien.

Gracias por la ayuda!