Text area con posibilidad de estilos de texto.

rtr · #1 (**permalink**) 09/11/2009, 07:41

Hola a todos,

¿como puedo poner en un formulario el textarea para una descripcion con posibilidad ,para el visitante , de poner tipos de letras, menus, colores,etc. ?
De la misma forma que al crear un nuevo tema en este foro.

No se si me he explicado bien.

Gracias a todos,

JavierB · #2 (**permalink**) 09/11/2009, 08:20

Hola rtr

Busca información sobre xhtmlarea o tiny_mce

Saludos,

rtr · #3 (**permalink**) 10/11/2009, 05:51

Ya tengo una idea de , mas o menos , lo que es pero no encuentro como instalarlo y donde conseguirlo.

rtr · #4 (**permalink**) 10/11/2009, 06:57

Ya he bajado el tinymce y lo tengo en la carpeta "raiz" de hosting, pero no me funciona.

os dejo el código..

Cita:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

</head>
<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"> </script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
</script>
<body>

<form method="post" name="tinymce">
<textarea name="texto" cols="50" rows="15"></textarea>
</form>
</body>
</html>

otra prueba en php...

Cita:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"> </script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
</script>

</head>

<body>
<form method="post" name="tinymce">
<textarea name="texto" cols="50" rows="15"></textarea>
</form>

</body>
</html>

rtr · #5 (**permalink**) 14/11/2009, 11:55

No consigo hacerlo funcionar, ¿nadie puede ayudarme?

David · #6 (**permalink**) 14/11/2009, 12:02

¿Te da algún error? ¿Has colocado la ruta correcta del script?

rtr · #7 (**permalink**) 14/11/2009, 13:15

no, no me da ningun error, solo que se ve el text/area normal

Panino5001 · #8 (**permalink**) 14/11/2009, 13:40

Probá así:

Código:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"> </script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "mceEditor"
});
</script>

</head>

<body>
<form method="post" name="tinymce">
<textarea class="mceEditor" name="texto" cols="50" rows="15"></textarea>
</form>

</body>
</html>

Agregando la propiedad editor_selector en el javascript y el atributo class en el área de texto a convertir.

rtr · #9 (**permalink**) 14/11/2009, 13:49

sique sin funcionar, dejo el codigo como esta actualmente;

Código:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"> </script>
   <script language="javascript" type="text/javascript">
      tinyMCE.init({
         mode : "textareas",
         theme : "advanced"
		 editor_selector : "mceEditor"

      });
   </script>

</head>

<body>
<form method="post" name="tinymce">
      <textarea class="mceEditor" name="texto" cols="50" rows="15"></textarea>
   </form>

</body>
</html>

Panino5001 · #10 (**permalink**) 14/11/2009, 13:54

Código PHP:

  theme : "advanced"

te falta una coma después de eso

rtr · #11 (**permalink**) 14/11/2009, 14:07

ya la coloque y nada, sigue sin funcionar. NO se..

rtr · #12 (**permalink**) 14/11/2009, 20:34

Hola de nuevo, he leido por ahi que existen editores de texto para los text areas con la posibilidad de insertar enlaces ¿es posible?

¿donde puedo descargar esos editores y como instarlarlos?? ya qeu el tiny_mce que he probado no puedo hacer que funcione...

gracias a todos , saludos

Panino5001 · #13 (**permalink**) 14/11/2009, 20:48

Pero funciona sin problemas. Tendrás algún problema de rutas o no habrás descargado todos los archivos.
Te dejo un enlace donde podés verlo en funcionamiento:
http://www.disegnocentell.com.ar/cur...g/wysiwyg.html

En este otro enlace verás el mecanismo para crear tu propio editor:
http://www.disegnocentell.com.ar/notas2.php?id=180
Y aquí tenés editores de otro tipo (bbCode):
http://www.caricatos.net/editor/index.php
http://www.disegnocentell.com.ar/notas2.php?id=131

rtr · #14 (**permalink**) 14/11/2009, 21:11

muchas gracias panino, buscando por ahi acabo de descubrir NicEdit y la verda me funciona y es bastante facil de usar.
No se si instalar los qeu me dices..¿como ves a este editor en comparcion con los otros? parece completo.

http://nicedit.com/

creo que tengo que descartarlo, porque no funciona en IE.

Panino5001 · #15 (**permalink**) 14/11/2009, 21:31

Se ve más o menos ese editor (en explorer 8 funciona, pero en explorer 6 tiene algunos problemas).

rtr · #16 (**permalink**) 14/11/2009, 21:42

no se que pasa que tampoco me funciona bbccode., te dejo el codigo

Cita:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Editor Online</title>
<script src="bbcode/bbcode.js"></script>
</head>
<body onload="init('id1','id2','id3','idn')">
<form id="form1" name="form1" method="post" action="">
<textarea class="mceEditor" name="textarea" cols="80" rows="5"></textarea>
</form>

</body>
</html>

debe funcianar en .html ¿verdad?

Panino5001 · #17 (**permalink**) 14/11/2009, 21:51

Sí, funciona en html sin problemas. Lo mejor sería que subas eso a un servidor y nos pases la url para ver qué está pasando. Como te dije antes, creo que estás ubicando mal las direcciones de los archivos.

rtr · #18 (**permalink**) 14/11/2009, 21:59

te lo paso en un momento

rtr · #19 (**permalink**) 14/11/2009, 22:02

http://www.web.comli.com/prueba.html , aqui esta ..

David · #20 (**permalink**) 14/11/2009, 22:05

No subiste el archivo .js, o por lo menos la ruta no es correcta. Ya que la siguiente dirección no funciona:
http://www.web.comli.com/bbcode/bbcode.js (que es donde debería estar el script)

rtr · #21 (**permalink**) 14/11/2009, 22:15

que estraño, esta en esta direcccion

http://www.web.comli.com/bebecode/bbcode/bbcode.js

pondre la carpeta bbcode como la primera en la raiz ¿no?

rtr · #22 (**permalink**) 14/11/2009, 22:19

ahora si funciona tu enlace David, Pero sigue sin funcionar el editor...

dejo el codigo de la pagina

Cita:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Editor Online</title>
<script src="bbcode/bbcode.js"></script>
</head>
<body onload="init('id1','id2','id3','idn')">
<form id="form1" name="form1" method="post" action="">
<textarea name="textarea" cols="80" rows="5"></textarea>
</form>

</body>
</html>

Panino5001 · #23 (**permalink**) 15/11/2009, 05:58

Es que hay que leer un poco, estás invocando elementos que no existen. Debería ser así:

Código PHP:

  <!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Editor Online</title> 
<script src="http://www.web.comli.com/bbcode/bbcode.js"></script> 
</head> 
<body onload="init('id1')"> 
<form id="form1" name="form1" method="post" action=""> 
<textarea id="id1" name="textarea" cols="80" rows="5"></textarea> 
</form> 
 
 
</body> 
</html>

La clave es agregar un atributo id a cada textarea a convertir (id1) e invocar a ese id dentro de la función init.
Pero te repito tinymce también funciona sin problemas, pero si no seguís las instrucciones (o no las leés completas para entenderlas) nada te va a funcionar.

Panino5001 · #24 (**permalink**) 15/11/2009, 06:21

Y, por cómo has colocado las carpetas ahora, no se verán los botones. Pero sí se ven correctamente si uno respeta la ubicación. Por ejemplo, usando la etiqueta base, este ejemplo funciona como debe e incluso muestra las imágenes (botones) sin inconvenientes:

Código PHP:

  <!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<base href="http://www.web.comli.com/" /> 
<title>Editor Online</title>  
<script src="bbcode/bbcode.js"></script>  
</head>  
<body onload="init('id1')">  
<form id="form1" name="form1" method="post" action="">  
<textarea id="id1" name="textarea" cols="80" rows="5"></textarea>  
</form>  
 
 
</body>  
</html>

rtr · #25 (**permalink**) 15/11/2009, 07:40

ahora si funciona!! , pero se me sigue resistiendo el tiny_mce, he comprobado la ruta y esta bien y he hecho lo mismo tu hiciste con el bbcode, colocando un id. Velo aqui:

Cita:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"> </script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "mceEditor"
});
</script>

</head>

<body onload="init('id1')">
<form method="post" name="tinymce">
<textarea id="id1" class="mceEditor" name="texto" cols="50" rows="15"></textarea>
</form>

</body>
</html>

esto es lo que se sigue viendo;

http://www.web.comli.com/prueba2.html

Panino5001 · #26 (**permalink**) 15/11/2009, 08:04

Pero ahí, no hay que usar init en el onload, que era para el otro editor. También obviaste el nombre del selector. Y por último, si mirás este archivo: http://www.web.comli.com/tinymce/jsc...ce/tiny_mce.js, verás que está truncado: no se bajó completo.
Edito: veo que agregaste lo del nombre de clase, pero lo otro sigue igual: el onload="init(... innecesario y el archivo javascipt incompleto.

rtr · #27 (**permalink**) 15/11/2009, 08:30

estoy intentando sustutuir el archivo tiny_mce.js . En el pc lo tengo completo pero no puedo subirlo con el filezilla, aparece incompleto en el servidor.

No entiendo que quieres decir con que obvie el nombre del selector...

Panino5001 · #28 (**permalink**) 15/11/2009, 08:36

Que si ves el código fuente de tu archivo prueba 2 vas a encontrarte con esto:

Código:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<base href="http://www.web.comli.com/" /> 
<title>Editor Online</title> 
<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script> 
<script language="javascript" type="text/javascript"> 
tinyMCE.init({
      mode : "textareas",
      theme : "simple",
editor_selector : "mceEditor"
   });
 
</script> 
 
 
</head> 
<body onload="init('id1')"> 
   <form method="post" id="id1" name="tinymce"> 
      <textarea class="mceEditor"  name="texto" cols="50" rows="15"></textarea> 
   </form> 
</body> 
</html> 
<!-- www.000webhost.com Analytics Code --> 
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script> 
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript> 
<!-- End Of Code -->

Como ves, en rojo te marqué lo que sobra y lo que te falta en azul.

rtr · #29 (**permalink**) 15/11/2009, 09:05

Ya tengo todo bien, pero se me resiste el archivo tiny_mce.js , nose porque no se sube bien

Cita:

<<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://www.web.comli.com/" />
<title>Editor Online</title>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector : "mceEditor"
});

</script>

</head>
<body >
<form method="post" name="tinymce">
<textarea class="mceEditor" name="texto" cols="50" rows="15"></textarea>
</form>
</body>
</html>

tambien quite el id en

<form method="post" id="id1" name="tinymce">

que creo que tambien sobra ¿verdad?

Panino5001 · #30 (**permalink**) 15/11/2009, 09:19

Sí, el id ya no hace falta. Posiblemente no puedas subir el js completo por alguna restricción en el servidor (veo que agrega cosas a los archivos, seguramente es un servidor gratuito).
Podría probar con algún otro. Aquí encontrarás un buen listado: http://www.php-hispano.net/hostings/