Este es un script que nos permitirá implementarle a nuestros formularios la posibilidad de que los usuarios puedan darle un formato HTML a sus post o mensajes. Para eso usaremos un textarea enriquecido con la librería gratuita wysiwyg.
Esto nos permitirá aplicarle estilos css a nuestros textarea, por ejemplo negritas, cursivas, itálicas, links, poner imágenes, entre otras cosas.
A continuación les muestro una sencilla manera de implementarlo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor Wysiwyg</title>
<script language="javascript" src="WYSIWYG/source.js" type="text/javascript"></script>
</head>
<body>
<center>
<div style="width:500px; float:left">
<form name="form" method="post">
<textarea name="texto" cols="35" rows="9"></textarea>
</form>
</div>
</center>
</body>
</html>
DEMO
Muy buen aporte. De que forma se podrian contar los caracteres para fijar un máximo?? Gracias
Hola amiga, excelentes codigos, me funcionaron al 100 !! :D gracias, me han funcionado a la perfeccción, lo estoy aplicando para crear un blogger con php y le agrage estos codigos y puff me ha funcionado de maravilla, probado en Mozilla y Google Crhome en sus ultimas versiones. Saludos desde Tlaxcala, Mex.
Soy yo o te falta poner el link de descarga de la libreria? salu2
Este plugin tiene un problema en IE , y es cuando en la misma pagina tenes mas de un textarea. Toma el contenido del ultimo y lo coloca en todos. Hasta donde vi, el problema esta en el archivo blank.html que carga si el navegador es IE
A mi me funciona bien, pero como se podría hacer para hacer el upload de imagenes a mi servidor y no colocar url externa, la idea es que quede en mi servidor en una carpeta para ello. gracias Cesar.
Que tal, funciona muy bien para fierefox pero para google chrome 17 tuve que añadir la validación if (rules!=null) { y con eso ya jalo. Saludos
muy buen trabajo felicitaciones!
Que tal!!! hace tiempo busco un editor, pero que tenga la opcion de insertar video de youtube, alguien que sepa de alguno?
Hola,esto me funciona bien en mi localhost, pero cuando lo pruebo en el servidor me muestra las listas y los links, pero no lo que está en negrita, ni subrayado, ni cursiva, etc... Lo estoy queriendo levantar con php. Me fijé que me llega así: negrita Falta la palabra bold. Alguien le pasó? Agradecería su ayuda! Saludos
Buenas noches, excelente tema y sirvió mucho la plantilla, como le puedo hacer para hacer más largo el campo de edición, intente algunas cosas, pero no pude. Otra es, quien es el autor para que le de crédito. Gracias
Chavos para los que no encuentran el .js les dejo la liga www.cesarcancino.com/codigos/wysiwyg-editor/WYSIWYG/source.js
Papelon: El único "pedazo de boludo" eres tú, que no ves el botón que dice Descargar y empieza a echarle la culpa a otros de ser tan ciego. El trabajo que hace César en este post de seguro es mayor al que has echo tú en toda tu vida, ya que se nota que no tienes ni valores, y eres un completo malagradecido, y aunque no sea el autor de este post, por si no te habías dado cuenta es el autor de más de 60 videos de PHP y MySQL.
Buenas tardes Excelente este tema, pero no logro desarrollarlo. No soy experto en JavaScript y hago busqueda de la libreria "source.js" en internet y no la encuentro, así que sí puedes indicarme o enviarme como utilizar te agredeceré. Cordial saludo
no están los archivos para bajar ni nada... si hacés un posteo hacelo bien! referenciá al autor !!! pedazo de boludo!!!
Y para guardar esa informacion en un campo de mi bd, como lo debo dejar?? Es decir, que tipo de campo utilizo?
Hola Cesar gracias por tu aporte interesante la pagina web , desde Uruguay.
Me diste una idea, gracias :)
Estimado Cesar: Soy novato en programación en ASP estoy aprendiendo de los ejemplos he visto el tuyo y me parece genial ero lo que buscaba,para una aplicación que estoy haciendo, puedo utilizar tu nombre dentro de los creditos, y si tienes por ahí como guardar el continodo del texto en un archivo con formato que sea libre de uso un abrazo y te felicito
Hola amigo excelente herramienta , pero me preguntaba si habra alguna forma de insertarle algo para que pueda tener la opción de enviar la información a algún e-mail , salu2
Funciona perfectamente en Mozilla, IE, Crome, pero no funciona en Opera. ¿Es necesario configurar el navegador de alguna forma para que funcione? Gracias por todas las aportaciones, me están siendo de mucha utulidad, especialmente las relacionadas con PHP.
Interesante muy bueno.
Hace tiempo que busco un editor para los text area, y este es el que mejor relación simpleza/resultado ofrece. Gracias, César. Como siempre, ofreciendo ayuda y recursos a los que empezamos...
Bastante bueno, llevo un tiempo buscando un editor Wysiwyg pero no había encontrado alguno bueno a mi parecer, y este ya lo probe y me funciona como quiero. Gracias, César, por la ayuda con estos recurso. Un saludo.
/** * * Editor WYSIWYG v1.0 RC3 * * Este script convertira todos tus textareas en * editores WYSIWYG (What You See Is What You Get) * Un editor WYSIWYG permite al usuario escribir * textos con estilos de una manera practica y sencilla. * Funciona tanto en IE como en FireFox * * Este script ha sido desarrollado integramente * por Iv�n Arias (arias@elleondeoro.com) * * Vista www.php-hispano.net y #php_para_torpes (iRC-Hispano) * */ Un buen colega siempre cita la fuente :)
hola cesar gracias por tus aportes en materia de recursos web queria hacer una acotacion, en este codigo hay que copiar o subir una carpeta que contenga las imagenes del editor enriquecido Gracias
Gracias Cesar es muy simple de usar en comparación de todos los que he visto. Gracias de nuevo por tu trabajo
gracias cesar por tus buenos aportes necesitaba un editor simple ya que los que tengo tienen muchas funciones y algunas de ellas estaban demas, un saludo maestro y gracias por compartir tus conocimientos y aportes con la comunidad se te agradece enormemente
Muy bonito, pero será que lo hago mal pero no le veo utilidad ninguna darle formato si no lo puedo salvar. Es decir, si lo envio por un formulario a mostrar.php y alli pongo el codigo "" me muestra el texto pero no el formato, por lo que si luego quiero reproducirlo, es como si hubiera usado un textarea, menos bonito pero igualmente efectivo...de que sirbe darle formato a un texto que va a quedar plano. Si lo hago mal indíquenme como salvar el formato, me sería muy útil.
Perdón por el comentario de antes, ahora creo que entendí como funciona...al textarea le puse la id="sms" y puse un botón con un onclick="alerta();"...la función alerta es la siguiente: function alerta(){ var mensaje = document.getElementById("sms").value; alert(mensaje); } y si, ahora me muestra el estilo css..PERFECTO...ahora puedo poner un formulario con un campo oculto para guardar el valor de la variable de javascript mensaje en php y guardarlo en mi base de datos :) Un saludo.
Nada, no hay forma, cada vez que paso el valor de javascript a un campo php pierde el formato, he probado a hacer funciones de replace pero no consigo mantener los estilos css. Si a alguiens e le ocurre cómo hacer para que lo que muestra el alert..."a" llege a php sin alterarlo(a mi me guarda solo "a") que avise. Un saludo y gracias.