Deprecated: Assigning the return value of new by reference is deprecated in /home/summarg/domains/summarg.com/public_html/wp-content/plugins/post-series/post-series.php on line 841 Notice: is_feed was called incorrectly. Conditional query tags do not work before the query is run. Before then, they always return false. Please see Debugging in WordPress for more information. (This message was added in version 3.1.) in /home/summarg/domains/summarg.com/public_html/wp-includes/functions.php on line 3245 Cómo insertar un editor WYSIWYG en tu proyecto web? | SummArg

SummArg | Cursos y recursos para webmasters

Cómo insertar un editor WYSIWYG en tu proyecto web?

Los editores WYSIWYG (What You See Is What You Get, que traducido significa Lo que ves es lo que obtenés) están muy popularizados, son fáciles de utilizar para el usuario por la similitud de su interfaz con los procesadores de texto del mercado y son muy faciles de añadir a un proyecto web.

Existe gran cantidad de editores gratuitos con buena documentación. Nosotros elegimos Whizzywig para este tutorial por su sencillez y compatibilidad con todos los navegadores del mercado. Pueden descargar de este link la última versión del editor (actualmente whizzywig61.js) y el archivo icons.png. En ese mismo listado podrán ver el archivo de lenguaje español, un archivo .txt con ejemplos para insertar el editor y otros. Los demos pueden verse en unverse.net/WYSIWYG

Agregar el editor a nuestro formulario

Coloquemos los archivos del editor (whizzywig61.js y icons.png) dentro de una carpeta /scripts/ en nuestro proyecto web. Entre etiquetas <head> en nuestra página debemos colocar la llamada al script:

<script type="text/javascript" src="scripts/whizzywig61.js"></script>

En algunos casos quizás necesitemos colocar en nuestra etiqueta <body> una llamada adicional:

<body onload="whizzywig()">

Y finalmente agregamos el <textarea> en donde aparecerá el editor, que como verán no tiene nada de especial:

<textarea id="cuerpo" name="cuerpo" style="width:95%; height:300px">
</textarea>

Con esto nuestro editor de texto WYSIWYG ya estará funcionando. Ahora veamos como editar la botonera quitando algunos elementos.

<textarea name="summary" id="first"><p>Tough test:</p><p>6 editors at once: this is a simple one.</textarea>
<script language="JavaScript" type="text/javascript">makeWhizzyWig("first", "bold italic color bullet link image html");</script>

Como se puede observar en el ejemplo del demo (ver > código fuente), makeWhizzyWig() acepta la inserción de los botones manualmente. Podemos leer sobre cómo construir rápidamente un editor personalizado en las pautas que brinda aquí. En el demo vemos lo facil que es insertar múltiples editores con diferentes características en nuestro proyecto web.

Dejar un comentario

  1. Greivinhf

    una pregunta como hago para enlazar este formulario con la base deatos donde quiero guardar los datos?
    les agradeceria mucho su ayuda

  2. Greivinhf

    Ya comprendi!! como hacerlo pero y en donde se guardarian las imagenes que se insertarián en el formulario, se guardarian en la BD? hay otra forma de guardarlas en una carpeta? Gracias

  3. como hago para insertarle datos desde un select a el editor de texto….

Dejar un comentario