> Manuales > Taller de Javascript

Editor HTML WYSIWYG, para integrar en formularios web, basado en Javascript de Moxiecode Systems AB.

TinyMCE es un editor HTML que es capaz de convertir los textarea de un formulario en campos WYSIWYG para poder incluir etiquetas HTML dentro de los campos de texto.

Características Integración de TinyMCE

Para poder utilizar TinyMCE es las páginas web, el navegador tiene que ser compatible y tener Javascript habilitado.

Primero hay de descargar TinyMCE desde la siguiente página de descargas: http://tinymce.moxiecode.com/download.php. Después hay que descomprimirlo y guardarlo en el servidor de la página web para poder utilizarlo en los textarea de los formularios.

En la página que se vaya a utilizar, primero hay que incluir la librería tiny_mce.js incluyendo el archivo externo de código Javascript.

<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

A continuación hay que inicializar TinyMCE para convertir los textarea en campos de texto WYSIWYG editables.

<script language="javascript" type="text/javascript">
tinyMCE.init({
      mode : "textareas",
      theme : "simple"
   });

</script>


Ejemplo de integración de TinyMCE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Ejemplo TinyMCE</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>


En este ejemplo primero hemos incluido la librería tiny_mce.js dentro de las etiquetas <head> . También dentro de estas etiquetas también hemos inicializado TinyMCE para que en el textarea del formulario se convierta en un campo de texto WYSIWYG.

Puedes ver el ejemplo en funcionamiento en el siguiente enlace.

Gema Maria Molina Prados

Equipo DesarrolloWeb.com

Manual