Editor de texto

Editor
formato texto:negrita cursiva subrayado   formato   párrafo:alineación izquierda alineación derecha alineación centrada alineación justificada   párrafo
Emoticones


resultado

Posbilidades:

Inserción en el lugar del cursor (reemplazando selección si la hubiera).

Leer selección (en el ejemplo permite entrecomillarla).

Notas:

Este sencillísimo editor solo tiene la finalidad de mostrar el uso de selecciones y posicionamiento dentro de campos de texto en páginas web.

Usa una sencilla librería que se puede bajar en este enlace.

Antes de continuar, les diré que ha sido probada en Mozilla, Explorer y Opera. En este último el comportamiento no es el deseado, pero espero que en futuras versiones del mencionado navegador, se pueda mejorar la edición.

El uso es muy fácil: En la cabecera del documento html hay que enlazar con la librería: 

		<script type="text/javascript" src="editor.js"></script>
... luego tenemos que inicializar el textarea que vayamos a usar al cargarse la página; 
		<body onload="elEditor = ini_editor(elTextarea)">
... o al recibir el foco (Pruebe la edición en ambos recuadros); 
		<textarea onfocus="elEditor = ini_editor(this)">
... por cierto hay que usar una variable global para que sirva de referencia... 
		<script type="text/javascript" >
			var elEditor; // declaración necesaria...
		</script>

Ahora solo nos queda usar la librería: _insertar(elEditor, dato) nos permite insertar el "dato" en la posición actual del cursor dentro del textarea, reemplazando la selección que hubiese... y para saber la selección actual tenemos la función _lector().

Comentarios

Nombre: alejandro
Procedencia: Foros Del Web
URL: http://www.elrincondetuspps.com.ar
Fecha de envío: 27 de diciembre de 2011, a las 06:44.
Valoración:
comentario:

Buenas caricato, ya este tema lo tengo ya terminado hace un par de semanas (con otro sistema distinto), pero tengo problemas al visualizar el resultado, por ejemplo; si ingreso en mi textarea solamente texto sale bien (ya sea todo seguido o con un salto de linea); pero al ponerle un emoticon ya sale mal el resultado.

En vez de salir asi:
**********
Hola como estas todo bien? [BIEN]
**********

me sale asi cuando al final:
**********
Hola como estas todo bien?
[BIEN]
**********
con elk emoticon abajo del texto.

Nombre: caricatos
Procedencia: España
E-Mail: webmaster@caricatos.net
URL: http://www.caricatos.net
Fecha de envío: 27 de junio de 2010, a las 10:35.
Valoración:
comentario:

Hola:

Vuelvo a agradecer los comentarios tanto de esta página como la de toda esta web. Especialmente, agradezco a quienes han querido aportar alguna mejora, como el mensaje anterior (¡Gracias Tk421 [APLAUSOS] !), y te comento que he tratado de ver el problema, pero en mi versión 8 del explorer no me ha fallado, y por eso por ahora no modificaré el código, pero espero que le sea útil a quienes se encuentren con el mismo problema.

Saludos [BIEN]

Nombre: Tk421
Procedencia: Una galaxia muy muy lejana
Fecha de envío: 16 de junio de 2010, a las 20:02.
Valoración:
comentario:

He tenido algunos problemillas cuando había texto seleccionado en Internet Explorer, pero lo he solucionado cambiando la funcion captura_ie para que quede de la siguiente manera:

function captura_ie() {
datos_ie();
return _texto;
}

He tenido que poner datos_ie(); para que recapture el texto, porque sin explicación aparente en algunas ocasiones _texto me devolvía o bien indefinido (undefined) o bien vacío (""), en lugar del texto que había seleccionado.

De todas formas muy util la herramienta.

Nombre: manumaf
Procedencia: Argentina
E-Mail: manumaf@gmail.com
URL: http://www.zylestt.com
Fecha de envío: 25 de marzo de 2010, a las 15:10.
Valoración:
comentario:

Muy bueno, es facil de editar esta expectacular

Nombre: 456
Procedencia: 456
E-Mail: 456
Fecha de envío: 31 de octubre de 2009, a las 18:36.
comentario:

espectacularrr !!! la verdad que muy bueno!

Nombre: Franco
Procedencia: Cordoba (Argentina)
Fecha de envío: 28 de septiembre de 2009, a las 09:54.
comentario:

FELICITACIONES! TE JUGASTE CAMPEON! TA GENIAL =)

Nombre: carlos
Procedencia: La Serena
Fecha de envío: 20 de agosto de 2009, a las 23:02.
comentario:

vmos a ver si funcka

Nombre: Luis
Fecha de envío: 7 de agosto de 2009, a las 17:19.
comentario:

Pueden poner un ejemplo mas completo de como se usa este script?

Nombre: renzo
Procedencia: peru
E-Mail: renzo1567@hotmail.com
Fecha de envío: 20 de julio de 2009, a las 19:47.
comentario:

al menos sirve.....

Nombre: Alcalina
Procedencia: Foros del Web
E-Mail: caballero259@gmail.com
URL: http://sweetmonsters.uuuq.com
Fecha de envío: 5 de junio de 2009, a las 15:20.
comentario:

Esta muy bien, pero sigo sin entender el codigo, demasiado complejo creo xD

Fecha de envío: 30 de diciembre de 2008, a las 16:50.
comentario:

no funciona la negrita ni la cursiva nada

Nombre: Pedro
Procedencia: Panamá
Fecha de envío: 6 de octubre de 2008, a las 01:01.
comentario:

Bien no entiendo de donde sale la propiedad posi, ni tampoco que se está pasando como paramétro en la función poner_ie(f, x) en la función ini_editor. Les agradeceré si me aclaran este punto... Saludos

Nombre: Pedro
Procedencia: Panamá
Fecha de envío: 6 de octubre de 2008, a las 00:59.
comentario:

Bien no entiendo de donde sale la propiedad posi, ni tampoco que se está pasando como paramétro en la función poner_ie(f, x) en la función ini_editor. Les agradeceré si me aclaran este punto... Saludos

Nombre: Dalmiro MAdera
Procedencia: Colombia
E-Mail: dalmadera@hotmail.com
Fecha de envío: 24 de septiembre de 2008, a las 23:06.
comentario:

Saluso es muy bueno, pero no me funcionó, deseo hacer algo parecido a lo que tienes para mandar los comentarios aqui, que se puedad realizar un pequeño texto formateralo y guradarlo, probe e codigo y no funciono tal mes estiy realizando algo mal.

Deseo me ayudes

Nombre: carlos duran
Procedencia: venezuela
E-Mail: carlosduran9@gmail.com
Fecha de envío: 12 de septiembre de 2008, a las 23:05.
comentario:

Hola no tienes como hacer que uno pueda elegir el color de la letra??? Gracias

Nombre: Alexis
Procedencia: Uruguay
E-Mail: alexisjoelleite@hotmail.com
Fecha de envío: 12 de agosto de 2008, a las 07:35.
comentario:

Quería decirte que detecté un pequeño error en tu editor y es que si yo

centro algo qúe está en la mitad de un párrafo

, como vos usaste o div o p, dichos elementos se muestran en bloque y provocan un salto de línea, crees que me puedas brindar una solución? Muchas gracias.
Pd: Si lo centro o le cambio la alineación

Nombre: pep
Procedencia: uruguay
E-Mail: asdf@hotmail.com
Fecha de envío: 19 de abril de 2008, a las 17:58.
comentario:

Muy buen editor web

me servira de gran ayuda

Nombre: David Restrepo
Procedencia: Armenia- Colombia
E-Mail: eldardav@hotmail.com
Fecha de envío: 17 de abril de 2008, a las 16:59.
comentario:

Hola Caricatos, me parece muy bueno tu editor y muy util para los q estan o estamos aprendiendo a ralizar o modificar editores.
quisiera pedirte un favor...quisiera saber como funciona ti funcion de "ponerEmoticon" o "parrafar", estas no estan en la libreria "editor.js"..podrias compartir esta info? o al menos darme una luz, por favor.

Muchas gracias

Nombre: visitante
Procedencia: Foros del web
E-Mail: a@a.net
Fecha de envío: 6 de abril de 2008, a las 05:22.
comentario:

Por cierto, Caricatos... la imagen del código de validación solo se valida con los números de la primera fila del teclado pero no deja validarlos con los números de la parte derecha del teclado. Un saludo y como siempre... un trabajo extraordinario.

Nombre: visitante
Procedencia: Foros del web
E-Mail: a@a.net
Fecha de envío: 6 de abril de 2008, a las 05:15.
comentario:

¿Y cómo se puede introducir en un libro de visitas para que el visitante pueda escribir su formato? es decir... supongo que haya que modificar el botón que dice "envie su comentario"
Muchas gracias.

Nombre: Rony
Procedencia: Mexico
E-Mail: rent84@gmail.com
Fecha de envío: 17 de diciembre de 2007, a las 18:00.
comentario:

Estube probando el editor, pero en el momento que tiene mas texto y si le doy doble click en una palabra para ponerla en negrita o subrayado, no me aperec nada de texto en la ventana del codigo, por lo tanto no hace nungun cambio.A que se deberá??

Nombre: Georkis Santieteban Núñez
Procedencia: WEBmaster
E-Mail: georkis05045@cmg.jovenclub.cu
Fecha de envío: 9 de octubre de 2007, a las 15:47.
comentario:

Hola, a la verdad no he podido instalar el ejemplo... porque los pasos no están definido para su instalación... ningún navegador se ve... espero que me ayudes...

Nombre: Arturo Lam Alvarez
Procedencia: Mexico
E-Mail: alamzero@yahoo.com.mx
URL: http://www.panucoenlinea.com
Fecha de envío: 4 de octubre de 2007, a las 05:28.
comentario:

Muy buen editor excelente trabajo

Nombre: Netfrank
Procedencia: Argentina
E-Mail: hackerman222@hotmail.com
URL: http://www.jmqv.com.ar/
Fecha de envío: 9 de septiembre de 2007, a las 17:51.
comentario:

Me adhiero al post anterior. Estoy buscando una manera de hacerlo sin usar el cuadro de diálogo. Me gustaría saber cómo hacerlo de ese modo.

Igual gracias.

Nombre: Roberto Gomez
Procedencia: Bucaramanga-Santander-Colombia
E-Mail: rogoelpra@yahoo.es
Fecha de envío: 7 de junio de 2007, a las 18:17.
comentario:

Me parece muy Bueno el Editor pero al parecer presenta un error pues cundo me ubico sobre los Botones de la Parte inferior de Este, en la Barra de estado muestra que hay hay un error en la Pagina. Seria bueno corregir esto.

Nombre: Greco
Fecha de envío: 6 de junio de 2007, a las 03:14.
comentario:

Hola,
estoy viendo la posibilidad de usar el editor o talvez construirme uno mas simple en base a este y restos de codigos que he leido por ahi para hacerme una idea y a la vez aprender haciendo pero me surge un problema, al utilizarlo en una web, si hay algun usuario desprevenido que deje algun tag sin cerrar al postear el mensaje, comentario o lo que sea me va a descuadrar la pagina, el formato ya que puede que se le quede alñgun tag sin cerrar.

Mi consulta es la siguiente, existe alguna forma para verificar que los tag ingresados estan con su devido cierre, algo asi como los foros que circulan por ahi que tienen la opcion de cerrar los tags abiertos??


Muy buena la pagina y educativa.

Nombre: Webmaster caricatos
Procedencia: España
E-Mail: webmaster@caricatos.net
URL: http://www.caricatos.net
Fecha de envío: 30 de marzo de 2007, a las 20:27.
comentario:

Solo escribo para comentar que el problema expuesto en el mensaje anterior está solucionado.
Gracias por participar.

Nombre: kanino
Procedencia: foros del web
E-Mail: kaninos4style@gmail.com
Fecha de envío: 30 de marzo de 2007, a las 10:46.
comentario:

muy buen editor solo cabe destacar que cuando envuelvo un texto y me equivoco al cancelar lo pone como null perdiendo el texto? no seria mejor envolverlo de forma inmediata que por medio de un alert ?

saludos

Colabore enviando su comentario

Nombre
Procedencia
Página web
E-mail *
Evaluación evaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluar
Código de envío

Rellene este campo con la clave de la imagen: codigo de envío

Nota Importante

El campo E-Mail es obligatorio para activar por correo electrónico el comentario (si no desea que se haga público, marque la casilla "anonimato"). También es obligatorio el código "captcha" (el número que se ve en la imagen adjunta); y por supuesto, debe existir un comentario.

Puede encontrar información sobre este sistema de comentarios en este enlace: Ponga comentarios en su web.

Edición negrita cursiva subrayado   alineación izquierda alineación derecha alineación centrada alineación justificada   Insertar enlace insertar imagen   Emoticones: [:)] [:(] [:x] [BIEN] [MAL] [SI] [NO] [APLAUSOS] [MEJORABLE] [¡A VER!] [¡DÉJAME PENSAR!] [FLIPE] [¡SIN PALABRAS!]

Valid HTML 4.01 Strict ¡CSS Válido! Página del webmaster
Visitas: contador