junio 10, 2009 7

Tutorial de TinyMCE. Parte I

By in JavaScript, Librerías

Hace poco daba por aquí una breve descripción de TinyMCE. Vamos a ver ahora un breve tutorial sobre este excelente editor WYSIWYG.

Para empezar veamos un ejemplo básico:

ejemploTinyMCE_1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Primer ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_1.js"></script>
</head>
<body onload="cargarTinyMCE();">
<h1>Primer ejemplo con TinyMCE</h1>
<textarea></textarea>
</body>
</html>

En el head de la página cargamos dos scripts, el primero es el script de TinyMCE y el segundo es un script propio donde tenemos una función (cargarTinyMCE) que se encarga de que aparezca el editor. En el evento onload  de la página llamamos a esta función. Como se puede ver en el body aparece un encabezado con el título y un textarea.

El código de la función cargaTinyMCE es:

ejemploTinyMCE_1.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "textareas",
		theme : "simple"
	});
  }

Con este pequeño trozo de código hacemos que aparezca el editor. Este editor se vería de la siguiente forma:

Primer Ejemplo con TinyMCE

Primer Ejemplo con TinyMCE

Vamos ahora a tocar un poco el código de la función para que varie un poco el aspecto. En este ejemplo no incluyo el archivo HTML porque es muy parecido al primero (aunque si se incluye en el ZIP).

ejemploTinyMCE_2.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		theme_advanced_buttons1 : "bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull ",
		theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo",
		theme_advanced_buttons3 : "",
		theme_advanced_toolbar_location: "top",
		theme_advanced_toolbar_align: "left"
	});
  }

En este caso la opción theme tiene el valor advanced, de esta forma podemos adaptar el editor a nuestras necesidades. Lo siguiente que vemos es que se han añadido las opciones theme_advanced_buttons1, theme_advanced_button2 y theme_advanced_buttons3 (theme_advanced_buttons<1-n>). Con estas opciones podemos indicar que botones van a aparecer en cada una de las barras. Si dejamos esta opcion vacia, como en el ejemplo con theme_advanced_buttons3, no aparece la barra. En la documentación de TinyMCE están los botones que tenemos disponibles.

Tenemos también las opciones theme_advanced_toolbar_location y theme_advanced_toolbar_align. Con la primera indicamos la posicion de la barra, en nuestro caso arriba (top), y la alineación de esta, en este ejemplo a la izquierda (left).

El editor quedaría:

Segundo ejemplo con TinyMCE

Segundo ejemplo con TinyMCE

Bien, esto es todo de momento. No viene mal echarle un ojo a la documentación de TinyMCE, donde se puede consultar mucha información sobre este editor.

Y como siempre el zip con los ejemplos de este tutorial (incluye el editor TinyMCE):

Ejemplos del tutorial de TinyMCE Parte I

Y la página de TinyMCE (enlace).

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

7 Responses to “Tutorial de TinyMCE. Parte I”

  1. Valeria dice:

    Una consulta, estoy usando el TinyMCE y necesito saber cómo hacer para acceder al texto escrito en un textarea para verificar, vía Javascrip que no envíe el formulario si no escribió el comentario.Muchas gracias!

  2. Amigo una pregunta. Al rato de subir una imagen, donde se graba, en la base de datos o en el servidor? y en que direccón está?  por tu ayuda muchas gracias.

  3. Nancy dice:

    Hola, muy util el tutorial. Una pregunta, la misma duda de Valeria: cómo validar el contenido del tiny?? usando javascript, para no enviar el formulario vacio. Espero me puedas ayudar. Muchas gracias

  4. Marcelo dice:

    @Valeria y @NancyPara obtener el contenido del textarea desde javascript (‘id_textarea’ es el id del textarea que queremos recuperar el texto):<code>var contenido = tinyMCE.get(‘id_textarea’).getContent();</code>

  5. hola esta muy bueno el tutorial pero como si el usuario sube imágenes como se hacer para validar eso y despues llamarlas.Gracias

  6. Hay un plugin de terceros para tinyMCE que se llama ibrowser, eso te puede servir.

  7. pablo dice:

    Me ha gustado mucho el tutorias, pero funciona en IE? A mi no me funciona y no sé si estoy haciendo algo mal o es que simplemente no es valido para IE

Leave a Reply