Si tienes una pagina web un poco avanzada, sabrás lo útil que puede llegar a ser que un textarea de un formulario se convierta en un completo editor de texto para así almacenar la información con formato y esto es muy fácil de hacer gracias a NicEdit, mediante su código que puedes agregarlo de manera muy fácil muy parecido un gadget sin descargar ningún programa al servidor (aunque también te permite esta opción)
Pruébalo:
Pruébalo:
Código:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
Este código lo puedes agregar en cualquier parte de tu pagina y convertirá todas las áreas de texto en unos minieditores con mucha calidad.
Ahora, si quieres que solo uno o algunos tengan esta opción y no todos, o si quieres configurar los botones mira este codigo:
<script src="http://js.nicedit.com/nicEdit-latest.js"
type="text/javascript"> </script>
<script type="text/javascript">bkLib.onDomLoaded(function() { new
nicEditor().panelInstance('texcontenido'); });
</script>
1.-En donde panelInstance contiene el nombre de tu textarea
Y listo tienes tu editor de texto personalizable para tu pagina web en menos de 5 minutos.
Este código lo puedes agregar en cualquier parte de tu pagina y convertirá todas las áreas de texto en unos minieditores con mucha calidad.
Ahora, si quieres que solo uno o algunos tengan esta opción y no todos, o si quieres configurar los botones mira este codigo:
<script src="http://js.nicedit.com/nicEdit-latest.js"
type="text/javascript"> </script>
<script type="text/javascript">bkLib.onDomLoaded(function() { new
nicEditor().panelInstance('texcontenido'); });
</script>
1.-En donde panelInstance contiene el nombre de tu textarea
2.-En el parentesis de new niceditor puedes poner el listado de botones que quieres que aparezcan por ejemplo:
new niceditor({buttonList : ['fontSize', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'html', 'image']}).panelInstance('texcontenido')
Y listo tienes tu editor de texto personalizable para tu pagina web en menos de 5 minutos.
ACTUALIZACIÓN:
Mi error, lo siento con todos los programadores que se guiaron en este post, se me olvidaba darles el comando que le deben dar por JavaScript antes de guardar en la base de datos o para cualquier fin, deben hacer una función,
por ejemplo:
function Ok()
{ nicEditors.findEditor('textarea').saveContent(); }
después de correrla toman el valor del parámetro, como cualquier otro campo que se envía por el Post o el Get de un formulario.
ACTUALIZACIÓN II
Debí explicarme un poco más: antes de enviar los datos, para ser guardados con formato, deben cargar el TextArea justo antes de hacer el "Submit" del formulario:
<script src="http://js.nicedit.com/nicEdit-latest.js"
type="text/javascript"> </script>
<script type="text/javascript">bkLib.onDomLoaded(function() { new
nicEditor().panelInstance('textarea1'); });
</script>
.
.
.
<script languaje="javascript">
function Ok()
{
nicEditors.findEditor('textarea1').saveContent();
document.formname.submit();
}
</script>
.
.
.
<form name="formname" action="pagqueguarda.php">
<textarea name="textarea1"> </textarea>
<input type="button" onClick = "Ok();">
</form>
Saludos,
Ok gracias...
ResponderEliminarno olvides decir que lo viste en http://trucosw3.blogspot.com
ResponderEliminarExcelente
ResponderEliminarLo voy a probar
ResponderEliminarAl pasarlo por un formulario e insertar el texto del textarea en una base de datos mysql, ¿Guarda las propiedades de edición al realizar una consulta del texto guardado?.. Agradezco tu respuesta! Saludos!
ResponderEliminarAlmacena en formato html....
EliminarMi error, lo siento con todos, se me olvidaba darles el comando que le deben dar por JavaScript antes de guardar en la base de Datos
deben hacer una función, por ejemplo:
function Ok()
{
nicEditors.findEditor('textarea').saveContent();
}
si yo tengo un blog, y quiero que el usuario pueda insertar imagenes que se encuentran dentro de su computadora dentro del text area. como ago para guardar las imagenes en el servidor?
ResponderEliminaragradesco su respuesta
Almacena en formato html, por lo cual guardara el link, pero el te da la opción de que la subas a un servidor de imágenes y subas el link....
EliminarMi error, lo siento con todos, se me olvidaba darles el comando que le deben dar por JavaScript antes de guardar en la base de Datos
deben hacer una función, por ejemplo:
function Ok()
{
nicEditors.findEditor('textarea').saveContent();
}
Es justo lo que estaba buscando, lo voy a probar.
ResponderEliminarMi error, lo siento con todos, se me olvidaba darles el comando que le deben dar por JavaScript antes de guardar en la base de Datos
ResponderEliminardeben hacer una función, por ejemplo:
function Ok()
{
nicEditors.findEditor('textarea').saveContent();
}
Hola, perdon por mi ignorancia, me podrian poner el codigo del formulario? no se como poner la funcion ok que mencionas, ni donde ponerla ni nada, quiero hacer un formulario (con php) y que los datos los guarde en mysql.
ResponderEliminarMUCHAS GRACIAS
Actualización II
EliminarNada , incapaz, por mas que miro no veo como hacerlo!. Un ejemplo completo porfaaaaaaaaaaaaa :)
ResponderEliminarLo agradezco de corazón
Actualización II
EliminarHola! Quiero incluir este código en un php cargado vía jquery con .load(). Pero no funciona! Tienen alguna idea de cómo hacerlo funcionar??
ResponderEliminarDesde ya, muchas gracias!!
Muchisimas gracias!! me ha sido de gran ayuda!! mil gracias de verdad, buen trabajo.
ResponderEliminarholaaa muy bueno pero no logro con la funcion para guardar los cambios! no logro entender donde tengo que agregar la funcion, me imagino que en el archivo JS, pero lo hago y no funciona!!!! muchas gracoas!
ResponderEliminarActualización II
EliminarActualización II
ResponderEliminarEste editor esta muy bueno (Y), gracias por postearlo!!! Sin embargo hay el siguiente inconveniente.
EliminarParece que si a algunos no les funciona bien, es por el navegador... Copié el codigo y lo ejecuté en Chrome y no funcionó, pero en IE si funcionó.
Lo raro es que el editor que esta de ejemplo en esta pagina si funciona, a pesar que estoy probándolo con Chrome...
Tal vez hay algo más que agregar para que el código (Actualizacion II) funcione en los principales navegadores
Es de uso gratuito?
ResponderEliminarno me funciona
ResponderEliminarGracias maestro. Me salvaste la vida con el código ACTUALIZACION II!!!
ResponderEliminarAmigo!... si no le pones el mismo id que el nombre del nombre del textarea no funciona de forma individual, por lo menos en chrome..
ResponderEliminar<!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>Textarea Enrriquecido</title>
</head>
<script src="http://js.nicedit.com/nicEdit-latest.js"
type="text/javascript"> </script>
<script type="text/javascript">bkLib.onDomLoaded(function() { new
nicEditor().panelInstance('textarea1'); });
</script>
<script languaje="javascript">
function Ok()
{
nicEditors.findEditor('textarea1').saveContent();
document.formname.submit();
}
</script>
<body>
<form name="formname" action="pagqueguarda.php">
<textarea id="textarea1" name="textarea1" > </textarea> <br/><br/>
<textarea name="textarea2"> </textarea><br/><br/>
<input type="button" onClick = "Ok();">
</form>
</body>
</html>
Asi me funciona perfecto
Hola buenas, como estas?
ResponderEliminarPerfecto el codigo, pero tengo un problema, te explico,
tengo mas de un campo para subir, el codigo que aca pones me sube uno solo, me podrias hechar una mano con esto,
Agradecido
solo es agregar dentro de form los demas campos y cada uno con su name para que al pasarlos por POST puedas guardar las variables de cada campo y listo.
Eliminarsolo es agregar dentro de form los demas campos y cada uno con su name para que al pasarlos por POST puedas guardar las variables de cada campo y listo.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar¿Y qué pasa con las imágenes?¿se guardan en el servidor o se pierden?
ResponderEliminarNecesito que cuando llame la información desde la base de datos me devuelva hasta las imágenes en php!!!
Este comentario ha sido eliminado por el autor.
ResponderEliminarFUCIOAN TODO OK. AL 100%
ResponderEliminaraTTE mASIEL
A mi me funciona todo correcto excepto los links. Cuando añado un link me lo toma pero le añade la url dónde se ubica la página con el textarea delente, así:
ResponderEliminarhttp://www.pepperline.com/img/img_noticies/\"http://www.nudiejeans.com/productionguide/\"
¿que puede ser?
amigo stoy utilizando su opcion para el texarea pero no me funciona cuando envio datos al textarea de un campo cualquiera me sale enblanco
ResponderEliminarutilizo php
es como para editar el campo que cargo en el textarea
No pudo ser mejor este post...
ResponderEliminarimportante colocarle al textarea el id igual al nombre como indica guillermo sevilla del resto alusinante
no me funciona dentro de un div que esta display:none :( ayudaaaaa!!
ResponderEliminarHola que tal. Primero muchas gracias por compartirlo, de entrada se ve bastante bien y yo también es lo que estoy buscando para una actividad. Tengo una pregunta: Explicas y creo que de forma muy clara como debe salvarse el contenido, pero ¿cómo se puede recuperar?, suponiendo que se salvará en una BD MySQL, en un campo de tipo "TEXT", quiero pensar que al momento de recuperar ese valor para que un usuario pueda modificar su texto, se recupera como cualquier valor de una BD y se coloca el valor recuperado en el TextArea correspondiente. Posteriomente para hacer el UPDATE en la BD, el valor se pasa de la misma manera con la función que hace el submit() de JavaScript. ¿Esto es correcto?
ResponderEliminarMuchas gracias de antemano.
Saludos.
y que pasa si el usuario dibuja una tabla? como se guarda es información en la bd?
ResponderEliminarHola buen posto pero como tomas el valor del textarea para alamacenarlo a la base de datos???
ResponderEliminarHola buen posto pero como tomas el valor del textarea para alamacenarlo a la base de datos???
ResponderEliminarHeeeeeee que felicidad, despues de 100 pruebas me funciono haciendo caso a lo que dice la gentita
ResponderEliminarimportante colocarle al textarea el id igual al nombre
eso me pasa por no hacer caso jajaja
Hola que tal buenas tardes me funciono este post, pero quiero saber como puedo validar que no este vacio con Jquery
ResponderEliminarMuchisimas gracias
ResponderEliminarTodavía funciona?
ResponderEliminar