Tutorial de TinyMCE. Parte III.
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.
Artículos relacionados:
