Noticias de diseño web

Actualidad en el mundo del diseño, programación web, y Marketing Online.

Como Implementar un cargador de ficheros en TinyMCE 4

Explicación detallada sobre como crear tu propio Filebrowser e integrarlo dentro del popular editor de HTML TinyMCE 4.

Como Implementar un cargador de ficheros en TinyMCE 4

A la hora de programar un buen gestor de contenidos que van que utilizar nuestros clientes, es buena idea integrar TinyMCE en aquellos areas 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.

Instalación de TinyMCE 4

1. Descargar la ultima 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

<script src="/scripts/tinymce/tinymce.min.js"></script>

4. Inicializar y configurar TinyMCE.

<script>
tinymce.init({
selector: "textarea"
});
</script>

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

<?php
$carpeta_ficheros = 'uploads/';
$directorio = opendir($carpeta_ficheros); // Abre la carpeta
while ($fichero = readdir($directorio)) { // Lee cada uno de los ficheros
if (!is_dir($fichero)){ // Omite las carpetas echo "<div class='fichero' data-src='".$carpeta_ficheros.$fichero."'>".$fichero."</div>"; } } ?>

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

<script>
tinymce.init({
selector: "textarea",
file_browser_callback : 
function(field_name, url, type, win){
var filebrowser = "filebrowser.php";
filebrowser += (filebrowser.indexOf("?") < 0) ? "?type=" + type : "&type=" + type;
tinymce.activeEditor.windowManager.open({
title : "Insertar fichero",
width : 520,
height : 400,
url : filebrowser
}, {
window : win,
input : field_name
});
return false;
}
});
</script>

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

<script type="text/javascript" language="javascript">
$(document).on("click","div.fichero",function(){
item_url = $(this).data("src");
var args = top.tinymce.activeEditor.windowManager.getParams();
win = (args.window);
input = (args.input);
win.document.getElementById(input).value = item_url;
top.tinymce.activeEditor.windowManager.close();
});
</script>

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.

 
Esta web utiliza cookies propias y de terceros para mejorar la experiencia del usuario y medir el tráfico de nuestra web. Si continúas navegando entendemos que estás de acuerdo con el uso de las cookies. Más información >