A la hora de programar un buen gestor de contenidos que van que utilizar nuestros clientes, es buena idea integrar TinyMCE en aquellas áreas de texto que requieran la posibilidad de insertar texto enriquecido. Pero hay casos en los que, además de poder formatear el texto, se necesita dar la opción de poder subir imágenes o ficheros para incluirlos dentro del contenido de la forma más sencilla posible. Es aquí donde podemos integrar nuestro propio FileBrowser.

Figure 1: TinyMCE 4

Instalación de TinyMCE 4

1. Descargar la última versión y los language packs necesarios.

2. Descomprimir el paquete y los language packs en la carpeta de scripts habitual.

3. Incluir el script principal de TinyMCE en la página donde queremos incluirlo, por ejemplo: editor.html



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.




4. Inicializar y configurar TinyMCE.


Con esto ya hemos convertido cualquier TEXTAREA en un editor de HTML. Ahora vamos a explicar como crear nuestro filebrowser.

Crear nuestro explorador de ficheros

Un explorador de ficheros consiste en una página desde la que se pueden leer ficheros de un directorio y cargar nuevos ficheros. Puede estar programada en cualquier lenguaje de programación que implemente dichas funciones, nosotros hemos utilizado PHP.

Esta página puede funcionar de manera independiente al TinyMCE, es decir, que accediendo directamente a dicha página podríamos subir y ver los ficheros que hay en un directorio determinado de nuestro servidor.

Nosotros sólo nos vamos a centrar en la parte de listar los ficheros que hemos subido:

filebrowser.php

 
if (!is_dir($fichero)){ // Omite las carpetas
echo "
data-src='".$carpeta_ficheros.$fichero."'>".$fichero."
";
}
}
?>

Una vez tenemos listo el fichero podríamos acceder a él y ver algo parecido a esto:

A partir de aquí podríamos programar también un formulario para subir ficheros, explorar por carpetas y demás, pero lo que nos interesa es saber como va a interactuar TinyMCE con nuestro filebrowser.

Integración con TinyMCE 4

file_browser_callback

Volviendo a la página donde tenemos nuestro TinyMCE, lo próximo será definir el objeto file_browser_callback.

Cuando pulsamos sobre los botones de insertar enlace o insertar imagen, TinyMCE abre un cuadro de diálogo donde hay que especificar el origen (la ruta del enlace o imagen que se desea insertar). Si definimos el objeto file_browser_callback, a continuación del campo origen, aparecerá un botón, el cual utilizaremos para abrir nuestro propio "filebrowser".

Vamos a definir este objeto como una función dentro de la configuración del TinyMCE para que abra el fichero filebrowser.php:

editor.html


Con esto ya podríamos abrir nuestro explorador de ficheros en un popup, tal y como vemos en la siguiente imagen:

Screenshot de nuestro cargador de ficheros en TinyMCE 4

Ahora nos queda lo más importante:
que al hacer clic en un fichero, se cierre nuestro cuadro de diálogo y que el campo "Origen" contenga la ruta del fichero seleccionado.

Vamos a incluir un pequeño script en nuestro explorador de ficheros que va a hacer precisamente eso:

filebrowser.php


En este script, se capturan los parámetros que el cuadro de diálogo de enlace o imagen han enviado a nuestro explorador de ficheros, que básicamente son:

win - La ventana del cuadro de diálogo que lanza nuestro explorador de ficheros, donde vamos a enviarle información de vuelta.
input - El campo de texto donde hay que introducir la ruta del fichero, al cual le estamos asignando el valor del atributo data-src del fichero en el cual hemos hecho clic.

Figure 1: Some beautiful placeholders