Gestor de imágenes compatible con CKEditor

Aquí os dejo un gestor de ficheros y en especial de imágenes, muy del estilo a CKFinder

Las principales características del gestor de ficheros son que está desarrollado basándose en jQuery y AJAX. Con esto se ha conseguido un interfaz muy fuido y agradable.

El gestor de ficheros e imágenes admite cualquier tipo de fichero. En el caso de las imágenes muestra miniaturas y permite redimensionarlas. En el resto de ficheros muestra un icono descriptivo del tipo de fichero (para los soportados).

Instalación:

  1. Descargar el fichero y descomprimirlo en una carpeta dentro de nuestro proyecto
  2. Crear una carpeta en nuestro proyecto para almacenar los ficheros e imágenes subidos
  3. Añadir una referencia al proyecto a la DLL «FileManager.dll» incluida en la carpeta «bin»
  4. En el caso de querer subir archivos grandes (más de 4 MB) habrá que modificar el Web.config de la aplicación de esta manera:
<system.web>
    <httpRuntime executionTimeout="240" maxRequestLength="20480"/>
    ...
    ...
</system.web>

De manera que con estos parámetros indicamos el tiempo máximo de espera en subir un fichero y el tamaño máximo (en KB).

Uso:

Para usarlo simplemente habrá que abrir la página «FileManager/Explorer.aspx», preferiblemente en un popup.

Al abrir la página podemos pasarle por querystring el parámetro «id», que indicará la ruta de exploración del gestor de ficheros. Si no indicamos el parámetro cogerá como raíz la raíz de la web.

Integración con CKEditor

En el caso de querer integrarlo con CKEditor simplemente habrá que añadir el siguiente parámetro a la inicialización de CKEditor, con los parámetros oportunos:

filebrowserBrowseUrl: '/FileManager/Explorer.aspx?id=img/files'

Bug conocidos:

  1. No permite el renombrado de la carpeta raíz
  2. No permite acentos en los nombres de las carpetas

Intentaré ir corrigiendo los problemas detectados. De la misma forma agradecería que se me informe de cualquier otro error detectado, así como posibles mejoras.

12 comentarios en “Gestor de imágenes compatible con CKEditor

  1. Hola Oscar,

    Estuve utilizando tu componente, encontré un error en ambiente de desarrollo, no he confirmado si ocurre en un ambiente productivo, pero al crear una nueva carpeta salir del formulario y volver a entrar no se muestra la nueva carpeta en el treeview

  2. Hola Oscar,
    estoy probando tu codigo pero en modulo local es que no carga el arbol con las carpetas y en mi servidor me genera un error en la siguiente linea Inherits=»NewAgeDesign.FileManager.ExplorerUploads».

    Te agradezco mucho tu colaboracion.

  3. Hola Oscar:
    Oscar, hay un bug, al momento de previsualizar las imagenes y los thumbs, las url me las muestra con back-slash, una solucion, debido a que no tengo fuentes de los compilados, archivo engine.js, funcion showFiles, agregar dos lineas:

    fileData.RelativePath = fileData.RelativePath.replaceAll(«\\», «/»);
    fileData.RelativeThumbPath = fileData.RelativeThumbPath.replaceAll(«\\», «/»);

    quedando de la siguiente manera:

    function showFiles(data) {
    var html = «»;
    for (var i = 0; i < data.length; i++) {
    var fileData = data[i];
    fileData.RelativePath = fileData.RelativePath.replaceAll("\\", "/");
    fileData.RelativeThumbPath = fileData.RelativeThumbPath.replaceAll("\\", "/");
    html += GenerateFileHTML(fileData);
    }
    $('#thumbs').html(html).selectable({
    filter: 'div.thumb',
    selected: function (event, ui) {
    currentImg = $(ui.selected).attr("file").replaceAll("\\", "/");
    sendFileToCKEditor(currentImg);
    }
    });
    createFileContextMenu();
    }

  4. hola Oscar
    Gracias por tu aporte , tengo problemas con filebrowserBrowseUrl: ‘FileManager/Explorer.aspx?id=Img/files’
    no me carga el árbol con los directorios, la ruta Img/files si existe y se encuentra en la raíz del proyecto.

  5. Hola. Veo un error en la funcionalidad que, creo, sería fácil de corregir.
    Si yo seteo una carpeta para que el usuario trabaje, (por ejemplo «/Explorer.aspx?id=misimagenes», veo el área de carpetas vacío, (es correcto). Pero si intento subir una imagen a esa carpeta, me advierte «Ha de seleccionar un directorio primero.»
    Esa carpeta es mi área de trabajo creada para el cliente. El mismo no tiene posibilidad de crear carpetas entonces, por default, debería poder subir imágenes en la carpeta raíz.
    Saludos y gracias

  6. Pingback: CKEditor File and Image Manager - Open Source Buzz

Responder a Carlos Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.