junio 17, 2009 4

Tutorial de TinyMCE. Parte III.

By in JavaScript, Librerías

Hoy vamos a ver dos propiedades muy interesantes para extender los diálogos de enlaces y de imágenes. Estas propiedades son external_link_list_url y external_image_list_url. Estas propiedades nos permiten añadir a los diálogos una lista de enlaces y de imágenes en un archivo externo. Este archivo contendrá código en JavaScript donde se define un array con los enlaces y las imágenes. Veamos como quedaría el código de nuestro quinto ejemplo:

ejemploTinyMCE_5.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>Quinto ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_5.js"></script>
<style>
#editor { width: 700px; height: 550px;}
</style>
</head>
<body onload="cargarTinyMCE();">
<h1>Quinto ejemplo con TinyMCE</h1>
<textarea id="editor"></textarea><br/>
</body>
</html>

ejemploTinyMCE_5.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "exact",
		elements: "editor",
		theme : "advanced",
		plugins: "fullscreen, advlink",
		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 : "image, link, fullscreen",
		theme_advanced_toolbar_location: "top",
		theme_advanced_toolbar_align: "left",
		external_link_list_url: "ejemploTinyMCE_5_links.js",
		external_image_list_url: "ejemploTinyMCE_5_images.php"
	});

  }

Se puede observar que se han añadido las dos opciones mencionadas. También vemos que en el caso de external_image_list_url se ha puesto como valor un archivo PHP. Esto es así porque se puede generar esta lista a partir de un script PHP, dando de este modo un número infinito de posibilidades. Esto también se puede hacer con la opción external_link_list_url. Veamos el código de los archivos:

ejemploTinyMCE_5_links.js:

var tinyMCELinkList = new Array(
	// Nombre, URL
	["Moxiecode", "http://www.moxiecode.com"],
	["mjcarrascosa.com", "http://mjcarrascosa.com"],
	["Google", "http://www.google.com"]
);

En el archivo se define un array llamado tinyMCELinkList. Cada elemento es a su vez un array con dos elementos, el primero el nombre de la URL (el que aparecerá en la lista) y el segundo la URL en si.

ejemploTinyMCE_5_images.php:

<?php

$dir = opendir(dirname(__FILE__).'/images');

$salida = "var tinyMCEImageList = new Array(\n";
$salida.= "//Nombre, URL\n";

$imagenes = array();
while(($imagen = readdir($dir)) != false)
{
	if($imagen != '.' && $imagen != '..')
	{
		$imagenes[] = '["'.$imagen.'", "images/'.$imagen.'"]';
	}
}

$salida .= join(",\n", $imagenes);
$salida .= ');';
header('Content-type: text/javascript');
echo $salida;
?>

Este archivo nos genera un array llamado tinyMCEImageList. En este array cada elemento es también un array con dos elementos, el primero el nombre de la imagen y el segundo la URL de esta. El script lo que hace es buscar todos los archivos de la carpeta images y meterlos en el array. También enviamos la cabecera Content-Type con el valor text/javascript, para que el navegador sepa que lo que recibe es código con JavaScript. El resultado de ejecutar este script es:

var tinyMCEImageList = new Array(
//Nombre, URL
["imagen1.jpg", "images/imagen1.jpg"],
["imagen2.jpg", "images/imagen2.jpg"],
["imagen3.jpg", "images/imagen3.jpg"]);

Con esto termina la tercera parte de este tutorial. Para finalizar el código de los ejemplos:

Ejemplos del tutorial de TinyMCE Parte III

No que decir tiene que cualquier duda se puede preguntar en los comentarios.

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

Tags: , , ,

4 Responses to “Tutorial de TinyMCE. Parte III.”

  1. Muchisimas gracias, está muy bueno el tutorial, pueden verse los ejemplos enhttp://www.alertaenelcamino.org.ar/ejemploTinyMCE_1.htmlhttp://www.alertaenelcamino.org.ar/ejemploTinyMCE_3.htmlhttp://www.alertaenelcamino.org.ar/ejemploTinyMCE_4.htmlhttp://www.alertaenelcamino.org.ar/ejemploTinyMCE_5.htmlTe harias uno de yahoo yui, que tambien sirve para escribir.Y otra cosa, como haces para generar imagen aleatorias como la necesito escribir para poder mandar este mensaje.Muchas gracias por todo.

  2. Marcelo dice:

    con: tinyMCE.get(‘historia’).getContent(); obtengo todo el contenido con el formato HTML¿Como obtengo el texto puro (sin los tags html) con javascript?Gracias.

  3. Juan dice:

    Oye Marcelo ¿si sólo quieres el texto puro y sin los tags de HTML, para que usas tinyMCE? ¿no sería en tu caso más fácil simplemente usar un textarea sin el editor?

Leave a Reply