Siguenos también en

Nuestro RSS Nuestro Twitter Nuestro Facebook

Inicio de Sesión

subscribete a nuestro RSS Feed

Jueves 9 de febrero de 2012

Guía: instertar un editor WYSIWYG con TinyMCE

Escrito por Jorge Bravo el 28 abril, 2010

cab-post-tiny

TinyMCE es un editor HTML On-Line que es capaz de convertir los textarea de un formulario en campos WYSIWYG traspasando todo el trabajo a HTML automáticamente.

Características

  • Es sencillo 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.

1
<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.

1
2
3
4
5
6
7
<script language="javascript" type="text/javascript">
tinyMCE.init({
      mode : "textareas",
      theme : "simple"
   });

</script>

Ejemplo de integración de TinyMCE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< !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 . 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.

Via: Desarrolloweb.com

Artículos relacionados

Categoría: DESTACADOS, Diseño web, GUÍAS, JAVASCRIPT, PROGRAMACIÓN, RECURSOS

Tags: , , , ,



Comentarios (2)

 

  1. Bitacoras.com dice:
    28 abril, 2010 a las 10:38 AM

    Información Bitacoras.com…

    Valora en Bitacoras.com: TinyMCE es un editor HTML On-Line que es capaz de convertir los textarea de un formulario en campos WYSIWYG traspasando todo el trabajo a HTML automáticamente. Características Es sencillo de integrar en las páginas web, ya……

  2. Tweets that mention Guía: instertar un editor WYSIWYG con TinyMCE -- Topsy.com dice:
    29 abril, 2010 a las 7:29 PM

    [...] This post was mentioned on Twitter by Jorge Bravo. Jorge Bravo said: Guía: instertar un editor WYSIWYG con TinyMCE: TinyMCE es un editor HTML On-Line que es capaz de converti… http://tinyurl.com/38dwrpk … [...]

inicio | arriba