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
- Es fácil de integrar en las páginas web, ya que solo tiene dos líneas de código.
- Se puede personalizar a través de temas y plugins.
- También se pueden instalar paquetes de idiomas.
- Es compatible con la mayoría de los navegadores como Firefox, Internet Explorer, Opera y Safari, aunque este último esta en fase experimental.
- Con el compresor GZip para PHP/.NET/JSP/Coldfusion, hace que TinyMCE sea un 75% más pequeño y mucho más rápido de cargar.
- Se puede utilizar AJAX para guardar y cargar el contenido.
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.
Compartir en redes sociales
Usuarios: 
23 de julio de 2008
Valoración del artículo:
