Desde hace tiempo tenía el deseo de compartir este plugin. Viene al caso decir que yo uso TinyMCE como editor web del C.M.S. costumizado que ofrezco a mis clientes. El editor es excelente, pero tiene un gran problema: El plugin para subir/editar archivos no es gratis. Tanto MCImageManager como MCFileManager son soluciones de pago. Después de múltiples fracasos tratando de implementar soluciones gratis decidí tratar de hacer un plugin yo mismo. También me gustaba la idea de almacenar las rutas de las imágenes y otro tipo de información en una base de datos. De esta manera podría fácilmente agregar un buscador, o mayor organización a los archivos, algo que cuesta un poco más de trabajo (por lo menos para mí) al trabajar directamente con archivos del ftp.
Yo no estoy acostumbrado a trabajar con javascript pero, afortunadamente, TinyMCE posee excelente documentación sobre como crear un plugin. Debido a mi limitado conocimiento de javascript no pude hacer algunas cosas como usar ajax al mostrar contenido, pero aún así quedé bastante contento con el resultado.
Debo agradecer a okram por crear las librerías PHPPaging y PHPImagen, las cuales no sólo he usado en este pluging, sino también en muchos de mis proyectos. Gracias también a Mark James por sus exelentes íconos.
Características del plugin:
- Creación de directorios virtuales
- Subir varios tipos de archivos
- Imágenes (jpg, gif y png)
- Documentos PDF
- Documentos Word
- Documentos Excel
- Documentos PowerPoint
- Documentos .txt
- Creación automática de thumbnails para la organización (PHPImagen)
- Uso de paginación de los directorios y archivos (PHPPaging)
- Vistas de thumbnails y listado de los archivos
- Búsqueda por nombre de archivo
Requerimientos:
- PHP5 o más reciente
- MySQL 4 o más reciente
- Librería GD para PHPImagen
Lista de cosas a mejorar:
- Cambiar navegación y la forma de mostrar contenido a Ajax
- Poder subir múltiples archivos
- Poder subir y crear thumbnails a videos
Instalación:
- Descomprimir el archivo zip en la carpeta de tiny_mce/plugin
- Crear las tablas en tu base de datos MySQL. Usa el archivo jFileBrowser.sql provisto en el zip.
- Encuenta el archivo include/config.inc.php y cambia las siguientes lineas por tu información de tu base de datos
$sql_db = 'Base_de_datos'; $sql_user = 'Usuario'; $sql_password = 'Password';
- Agrega lo sigiente en tu tinyMCE.ini():
añade jfilebrowse a la lista de pluginsplugins : "jfilebrowser"
añade jfilebrowse a la lista de botones
theme_advanced_buttons1 : "jfilebrowser"
- Cambiar los permisos de la carpeta:
tiny_mce/plugins/jfilebrowser/archivos/
a 777, osea, que se pueda leer y escribir.
Exclente esperamos sigas con este projecto, la verdad bastante solido, mucha suerte.
Hola desde España.
He descargado el fichero “http://juaniquillo.com/codigo/descargas/jfilebrowser.zip” y dentro del zip viene adjunto en archivos/20100314115354_0.docx un documento de word con datos personales.
Saludos cordiales desde España.
Muchas gracias por el aviso Andrés. Debí haber revisado el zip mejor. Ya remplazado el zip. Saludos y espero que el plugin te funcione para algo.
donde modifico la ruta de las imagenes ya que no me las muestra, solo aparece el nombre de la imagen
¿dónde no te las muestra? ¿en el editor? como explico en el post, la ruta de las imagenes es “tiny_mce/plugins/jfilebrowser/archivos/”
Muy grande este plugin!!!!!
Graciasssss
Muchisimas gracias por compartir tu código y la forma de como instalarlo, no tengo mas como agradecerte que por este medio, me fue muy util, como decia un grupo “Gracias totales”.
Suerte en tus proyectos
Excelente, Muchas gracias por compartirlo, despues de mucho buscar por fin encontre algo que funciona y se instala muy sencillamente.
De nuevo muchas gracias.
Hola, he revisado este plugin y está muy bien pero cuando selecciono un texto e inserto un archivo me sustituye el texto seleccionado por el nombre del archivo. Existe alguna forma de que se mantenga el texto seleccionado y se haga un vínculo al archivo pero con ese mismo texto. Que cambios tendría que hacerle al código.
Además necesito poder cambiar la dirección donde el plugin lee los archivos y carpetas, es que ya tengo en mi web una carpeta destinada para este fin y quisiera configurarlo para que lea de la carpeta.
Y una duda, porqué la necesidad de hacer uso de la base de datos???
Muchas gracias de antemano.
Saludos.
Te respondo Enrique. La verdad es que este plugin forma parte de el sistema de imágenes de un CMS creado por mí. La base de datos me ayuda a tener una tabla general de imágenes y así poder tener todas las imágenes centralizadas en un sitio. Yo no uso la ruta que tiene ahora el plugin. Igual que tú, uso otra ruta para, de igual forma, agrupar mis imágenes. Decidí cambiar la ruta ya que pensé que era lo mas adecuado al hacer que el plugin funcione solo. La ruta la puedes cambiar muy fácilmente. Necesitas hacerlo en cuatro partes:
1- filebrowser.php - línea #212- include/validacion.inc.php - linea #162, linea #218 y linea #260
Después de tu comentario se me ocurre centralizar la ruta en el config.inc.php para la próxima versión.
En cuanto a lo de los archivos, me parece lógica tu necesidad pero la verdad es que tendría que ver como se puede hacer. Se que la parte que se debe cambiar es donde se construye el html que se va a mostrar en el editor. Esa parte está en:
js/dialog.js, linea #29Sólo se me ocurre trabajar esa parte para la próxima versión. Si tú decides trabajarla por tu cuenta te agradecería que me dijeras si la pudiste resolver y cómo para incluirla en la próxima versión. Y, por supuesto, te mencionaría como colaborador.
Saludos y suerte.
de casualidad tienes este super plug in para asp?
No, lo siento. Yo no uso ASP así no puedo ayudarte con eso.
Hola,
Ante todo decirte que es genial el script, veo ciertos puntos que me interesaria comentar contigo y que entiendo serian mejoras interesantes.
En mi caso querria que 2 cosas:
1º. Actualmente toma la ruta de las imagenes con PHP_SEL, no obstante yo necesito que sea una ruta más absoluta, para poder enviar por email un documento con imagen incrustada y que este la tome de una URL ABSOLUTA.
2º. No me aclaro de como cambiar la carpeta raiz de donde almacena las imagenes.
Puedes ayudarme en estos 2 apartados,
Muchisimas Gracias,
@José
Gracias por los muy buenos puntos que traes. Se supone que el script inserte la ruta absoluta como puedes ver en la linea 22 del archivo “filebrowser.php”:
///////////ruta donde estan los archivos$ruta_completa_ar = str_replace('filebrowser.php', '', $_SERVER['PHP_SELF']).'archivos/';
Si te aparecen rutas relativas puede ser que no TinyMCE las esté cambiando. Verifica que has especificado que no quieres rutas relativas en tu TinyMCE.init:
relative_urls : falseComo le he comentado a Enrique en otro comentario, para cambiar la ruta de las imágenes debes hacerlo en cuatro (4) partes del script:
1- filebrowser.php - línea #222- include/validacion.inc.php - linea #162, linea #218 y linea #260
hola no me anda el carga de una imagen
@belen ¿Y te da algún error?
Hola nuevamente,
Mi duda es, donde esta el valor de $ruta, pues en las lineas 162, 218 etc… aparece dicho valor, no obstante.
Hola a todos ya se como poder cambiar el directorio base de las imagénes, es algo más complejo de lo que comentas Juaniquillo, se deben tocar más lineas en el archivo jfilebrowser. Estos días ando liado, pero proximamente lo compartire con todos ustedes.
Saludos,
@Jose: Ya veo. También está la variable $ruta la cual no hace nada ya que se es parte de mi pasada configuración y debí haberla quitado. Como dije antes, este script lo hice para que trabajar con mi CMS y por visto todavía tiene algún código innecesario. Yo estoy trabajando en una nueva versión desde cero teniendo en cuenta estos puntos. Espero tenerla pronto. Saludos y gracias por el interés.
Necesito encontrar el archivo tinyMCE.ini(). no se donde, ya lo busque por todos lados y nada! gracias!
tinyMCE.ini() no es un archivo, es una función la cual inicializa tinyMCE. Busca entre los archivos javascripts enlazados a tu página.
Mensaje: ‘tinymce’ no está definido
Línea: 1
Carácter: 13
Código: 0
URI: http://localhost/admin/noticias/jscripts/tiny_mce/plugins/jfilebrowser/editor_plugin.js
Eso quieres decir que no has incluido tinyMCE a tu página.
en si la pagina se ejecuta bien, solo que no me muestra el ico que vos pones. y lo otro del tinymce me anda bien.
Hay alguna forma que te pase el codigo y lo veas, sin compromiso.
Si tienes dudas con los pasos a seguir sigue el ejemplo de demo.
Tengo una duda un poco rara. Se puede separar de alguna forma para que multiples usuarios tengan un directorio diferente de imagenes?
Me explico. La idea es si se puede configurar para que tome diferentes valores como directorio raiz en función del usuario. Ejemplo:
Usuario 1: Directorio / = tiny_mce/plugins/jfilebrowser/archivos/usu1
Usuario 2: Directorio / = tiny_mce/plugins/jfilebrowser/archivos/usu2
Espero haberme explicado. Se me ocurren un par de formas, pero cambiar la ruta en 4 sitios a la vez….uffff…
Podrías aprovechar el hecho que se usan directorios virtuales para lo que quieres. Podrías añadir un campo de usuarios a la base de datos de directorios y agregar el id del usuario que creo el directorio. Para eso necesitas integrar tu sistemas de sesiones de usuarios al sistema.
Yo estaba pensando en algo un poco más estandar: parametro en la llamada al tiny en el que se especifique la ruta. Ejemplo:
relative_urls : false
theme_advanced_buttons1 : “jfilebrowser”
rutajfilebrowser: larutaquequeramos
De esta forma separariamos la programación de lo que es el plugin (que se quedaria estandar y sin tener que tocarlo) de lo que es el resto del sitio web. Por otro lado, lo de los directorios virtuales está bien, pero ¿se puede retroceder en el arbol de directorios virtuales? Es que si es asi, no me vale porque tienen que ser directorios aislados.
Aun asi, agradezco tu pronta respuesta y sobre todo este peazo de plugin que me ha encantado.
@Henry: :la ruta se tiene que especificar en el código PHP, no en en el javascript. El PHP es el que se encarga de mover los archivos a la carpeta correspondiente. Yo ya estoy trabajando en una nueva versión OOP y con más opciones. Lo de la ruta de los es una de las opciones que se podrán configurar fácilmente. Espero tenerla lista pronto.