TinyMCE + Responsive File Manager

Todo el mundo conoce TinyMCE, el editor de texto WYSIWYG que funciona en la mayoría de aplicaciones web en la que utilizando unas cuantas opciones personalizadas podemos obtener un editor según nuestras necesidades.

Hasta aquí bien, pero ¿Qué pasa cuando necesitamos añadir un archivo a nuestro texto? Creo que existe una función sencilla pero yo he utilizado un plugin externo que me pareció interesante. El problema es que este plugin se ha actualizado a una nueva versión y no he tenido tiempo de verificar si esto funciona en la nueva versión. Dejaré un enlace para descargar la versión que yo utilizo para poder trabajar con ella.

La Versión de TinyMCE  que estamos utilizando es la V3 pero confirmo que se puede utilizar la V4.

El plugin que añadiremos para gestionar la subida de ficheros será Responsive FileManager.

Instalación

Al descargar el archivo comprimido, lo colocaremos en la carpeta donde tengas instalado el TinyMCE.

Al descomprimir verás una carpeta que dice TinyMCE. Dentro está  una carpeta responsivefilemanager. “Cortamos” para moverlo.

Buscamos la carpeta de TinyMCE > carpeta plugins y “pegamos”.

Podríamos meter todo desde la misma carpeta del tinymce, pero preferí separar las cosas para tenerlo mejor controlado.

Iniciar el Plugin

Para iniciar el plugin con el TinyMCE tendremos que añadirlo a la función .init junto a las opciones que tengamos establecidas:

plugins: ['todosNuestrosPlugins responsivefilemanager'],
toolbar: ['nuestrasOpcionesPersonalizadas responsivefilemanager']
external_filemanager_path: root_folder+"js/responsivefilemanager/filemanager/",
filemanager_title:"Gestor de Archivos",
external_plugins: { "filemanager" : root_folder+"tinymce/plugins/responsivefilemanager/plugin.min.js"},

todosNuestrosPlugins se refiere a los plugins que tengamos cargados manualmente.

nuestrasOpcionesPersonalizadas se refiere a las opciones que queremos mostrar en el toolbar.

plugins buscará el nombre del plugin responsivefilemanager en la carpeta de plugins (Tal como lo hemos creado y llamado anteriormente)

toolbar es el sistio donde queremos que aparezca nuestro plugin en la barra de herramientas que se mostrará al cargarse el editor.

external_filemanager_path es donde se cargará la librería. (Dónde la hemos instalado junto al TinyMCE)

external_plugins es el sitio donde hemos instalado el plugin en el tinymce para que la magia se haga realidad.

Para controlar la acción del botón de Búsqueda / Browse de la imagen, crearemos un callback function que realizará la acción de abrir el dialog donde se cargará el responsive file manager.

El código lo añadimos al .init igual que las opciones anteriores:

file_browser_callback: function(field_name, url, type, win) {
var filebrowser = root_folder+"js/responsivefilemanager/filemanager/dialog.php?type=1&fldr=source_"+source_id+"&field_id="+field_name;
tinymce.activeEditor.windowManager.open({
title : "Insertar Fichero",
width : 850,
height : 500,
url : filebrowser,
id : 'tinyMceFileBrowser'
},{
window : win,
input : field_name
});
return false;
}

Ahora les explico qué parametros nos da el callback de TinyMCE. Pero quiero aclarar que hay un parámetro que puede que nos resulte confuso.

Hay un parámetro TYPE que veremos en la URL de “var filebrowser”. Yo en un principio pensaba que lo que venía entre los parámetros del callback era lo que había que meter en la URL (pensando que el plugin estaba preparado para interpretarlo) pero no es así.

Lo que nos devuelve el parámetro type del callback del TinyMCE son 3 opciones (‘image’, ‘media’ or ‘file’) y se utiliza en su función nativa
El parámetro que añadimos en la url de “var filebrowser” pueden ser 3: (1:images files 2:all files 3:video files)

Por lo que no tiene nada que ver con lo que nos da el TinyMCE. Hay que tenerlo en cuenta para no confundirlo.

file_browser_callback

Esta opción habilita el buscador de archivos en las opciones de TinyMCE que utilicen la función de buscar/cargar.

Si esta opción está configurada, habilita un botón de “buscar / browse” en los dialogs de “insertar/editar link” o en el de “insertar/editar imagen”.

El formato de la función:

fileBrowser(field_name, url, type, win)

field_name es el id/nombre del elemento del formulario (textarea) donde se insertará la url o el archivo.

url es el link del elemento actual (si estuvieses editando uno o quisieses eliminarlo). Por ejemplo al clicar un enlace o imagen dentro del TinyMCE.

type es el tipo de “buscador” que se utilizará. El valor puede ser ‘image’, ‘media’ o ‘file’, dependiendo desde que dialog se esté llamando la función.

win hace referencia al dialog/window que está ejecutando la función.

Configuración para Separar Usuarios

Una de las cosas que era necesario implementar era que cada usuario pueda ver su propia carpeta. Para ello, añadiremos unas cuantas opciones en las sesión. Creo que no hace falta decir que debe añadir estas opciones cuando el usuario incie sesión, pero por si acaso LO CONFIRMO. Estas opciones las cargará automáticamente el plugin, y podemos ver como se utiliza en el archivo de dialog.php y ajax_calls.php

// CARPETA POR DEFECTO PARA SUBIR IMAGENES/FICHEROS DEL EDITOR DE TINYMCE
$_SESSION['RF']["verify"] = "RESPONSIVEfilemanager"; // Verificación para el plugin de File Manager
$_SESSION['RF']['subfolder'] = 'source_'.$_SESSION['user_id'];
$_SESSION['RF']['language'] = $_SESSION['user_lang']; // Tenemos 3 idiomas configurados español (es), inglés (en), italiano (it)
if($sss['lang_entidad'] == 'en') $idioma = 'en_EN'; // Si entramos en la carpeta de responsivefilemanager/lang veremos los distintos idiomas
else $idioma = $_SESSION['user_lang'];
$_SESSION['RF']['language_file'] = 'lang/'.$idioma.'.php'; // Cargamos la configuración según el idioma