jFileBrowser para TinyMCE . Sube y maneja archivos usando TinyMCE, PHP y MySQL

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.init():
añade jfilebrowse a la lista de plugins
```
plugins : "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.

Be Sociable, Share!

Tags: archivos, imágenes, javascript, MySQL, php, Programación, tinyMCE

Este mensaje fue 'posteado' el Viernes, marzo 5th, 2010 at 5:00 pm en la categoría Programación . Puedes responder, o trackback desde tu propio website.

vinnie

Exclente esperamos sigas con este projecto, la verdad bastante solido, mucha suerte.
Andrés

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.

http://juaniquillo.com juaniquillo

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.

jesus

donde modifico la ruta de las imagenes ya que no me las muestra, solo aparece el nombre de la imagen

http://juaniquillo.com juaniquillo

¿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/”

Ainara

Muy grande este plugin!!!!!
Graciasssss
http://www.soloizcalli.com Gemva

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
http://www.colcarros.com oscar vargas

Excelente, Muchas gracias por compartirlo, despues de mucho buscar por fin encontre algo que funciona y se instala muy sencillamente.

De nuevo muchas gracias.
Enrique Hdez

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.
http://juaniquillo.com juaniquillo

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 #21 2- 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 #29

Só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.
Yuyo

de casualidad tienes este super plug in para asp?

http://juaniquillo.com juaniquillo

No, lo siento. Yo no uso ASP así no puedo ayudarte con eso.

Jose

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,

http://juaniquillo.com juaniquillo

@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 : false

Como 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 #22 2- include/validacion.inc.php - linea #162, linea #218 y linea #260

http://ho belen

hola no me anda el carga de una imagen

http://juaniquillo.com juaniquillo

@belen ¿Y te da algún error?

Jose

Hola nuevamente,

Mi duda es, donde esta el valor de $ruta, pues en las lineas 162, 218 etc… aparece dicho valor, no obstante.
Jose

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,

http://juaniquillo.com juaniquillo

@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.

jp

Necesito encontrar el archivo tinyMCE.ini(). no se donde, ya lo busque por todos lados y nada! gracias!

http://juaniquillo.com juaniquillo

tinyMCE.init() no es un archivo, es una función la cual inicializa tinyMCE. Busca entre los archivos javascripts enlazados a tu página.

charky

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

http://juaniquillo.com juaniquillo

Eso quieres decir que no has incluido tinyMCE a tu página.

charky

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.

http://juaniquillo.com juaniquillo

Si tienes dudas con los pasos a seguir sigue el ejemplo de demo.

Henry

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…

http://juaniquillo.com juaniquillo

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.

Henry

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.

http://juaniquillo.com juaniquillo

@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.

http://kumbiaphp.com/ CaChi

Tienes pensado hacer algo con multiupload? estoy trabajando en un proyecto KuBlog[1] en cual deseamos utilizar este plugin para galerías de fotografías pero como sabes es bastante incomodo subir las fotos de una en una, tampoco me refiero a subir una cantidad exagerada, me imagino subir de 5 fotografías (ó archivos) al mismo tiempo…

Es una oportunidad de mejoras, ya el equipo esta evaluando para seguir el proceso de adherir este componente por demas muy bueno…

¡Éxitos!

[1] http://github.com/KumbiaPHP/KuBlog

http://juaniquillo.com juaniquillo

Gracias por el interés CaChi. Sí estoy pensando incorporar subida de múltiples archivos para la segunda versión de la misma forma que Wodpress lo hace. La parte de PHP ya la tengo resuelta pero todavía me hace falta la parte javascript. Estoy buscando la forma de agregar jquery al plugin ya que he usado uploadify anteriormente pero no he encontrado la forma de hacerlo. Si quieres te puedo mantener informado acerca de este particular. También voy a echarle una mirada a KuBlog a ver que tal. Saludos.

http://www.zonarock.tk zonarock

wow extremadamente bueno… Mas bien una pregunta alguien sabe como configurar el Tynimce Exacatamente cono los botones que muestra WORDPRESS

http://juaniquillo.com juaniquillo

No sé exactamente a qué te refieres con configurar, pero aquí hay un ejemplo de como puedes agregar botones costumizados: http://codex.wordpress.org/TinyMCE_Custom_Buttons
Creo que sería un buen tópico para explorar.

http://www.zonarock.tk zona rock

Hola juaniquillo, no se que estare haciendo mal, pero al declarar el plugin y el boton me borra todo el tinymce del textarea. Esta es mi cinfiguracion, aver si porfavor me ayudas.
tinyMCE.init({ // General options language : "es", mode : "exact", elements : "elm1", theme : "advanced",
plugins : "jfilebrowser ,pagebreak,style,layer, table, save,advhr,advimage, advlink, emotions,iespell,inlinepopups,insertdatetime,preview, media,searchreplace,print, contextmenu,paste, directionality,fullscreen, noneditable,visualchars, nonbreaking, xhtmlxtras,template, wordcount, advlist,autosave", // Theme options theme_advanced_buttons1 : "jfilebrowser,bold, italic,underline ,strikethrough,|,justifyleft, justifycenter,justifyright, justifyfull,|,bullist,numlist,|, forecolor,backcolor,|, charmap,|,removeformat,| ,undo,redo,| ,link,unlink,image,|,pagebreak,| ,preview", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", // Example content CSS (should be your site CSS) content_css : "tiny/css/content.css", //Drop lists for link/image/media/template dialogs template_external_list_url : "tiny/lists/template_list.js", external_link_list_url : "tiny/lists/link_list.js", external_image_list_url : "tiny/lists/image_list.js", media_external_list_url : "tiny/lists/media_list.js", // Replace values for the template plugin. Sin esto no funciona en IE6, 7, 8 template_replace_values : { username : "Some User", staffid : "991234" }
}); //FIN TYNI

http://juaniquillo.com juaniquillo

Esto casi siempre pasa porque tinyMCE no puede encontrar el plugin. Si añades un plugin al tinyMCE.init() y no está en la ruta correcta el script no devuelve nada.

En tu caso he visto que la linea:

language : "es",

Hace que tinyMCE no funcione

Elmer

hola, y gracias por el plugin, pero tengo un problema, no encuetro el
tinyMCE.ini(),en que directorio generalmente esta?
Gracias

http://juaniquillo.com juaniquillo

tinyMCE.init() no es un archivo sino la función que inicia a TinyMCE. La función debe estar en un archivo javascript o en el archivo HTML donde está el textarea.

Joel

Hola, muchas gracias por el plugin.
Pero queria saber si existe otro plugin o alguna funcion que…
El texttarea sea usado como un editor de texto para introducir nuevos temas o articulos en un foro por los usuario, donde puedan poner imagenes en sus articulos,por ejemplo copiar una imagen de google-imagenes y pegar en el texttarea o poner una imagen en el texttarea desde el ordenador, y cuando terminen de editar su articulo, se suba las imagenes como un archivo automaticamente al directorio de imagenes en el momento de hacer click en el boton “enviar el articulo” y que se guarde la ruta de estos archivos en la base de datos junto con el articulo para poder mostrarlos.
Espero que me puedan ayudar….

http://juaniquillo.com juaniquillo

No, no visto nada como lo que describes. He visto tecnología de arrastrar y pegar (drag and drop) como la de Gmail, pero creo que solo funciona para ciertos navegadores.

Joel

Hola, gracias por la respuesta, pero creo que describi con exageracion el plugin que buscaba, porque creo que las imagenes que se tomaban de internet se guargan sus rutas facilmente en la base de datos y se pueden mostrar facilmente.
Pero en si lo que desearia encontrar es si hay un pluging parecido al tuyo pero que no posea las opciones de crear un nuevo directorio, o poder borrarlas, ni tampoco poder explorar las carpetas ya que solo serian privilegiados para el administrador o mederadores, sino, que solo se pueda subir una imagenes por los usuarios cuando postean, osea que cuando van escibiendo adjunten una imagen de su ordenador, siguen escribiendo adjunten otra imagen de su ordenador y cuando ya terminen de escribir su articulo, recien se suban las imagenes a la carpeta de imagenes y el articulo junto con la ruta de la imagen en la base de datos para mostrarlos luego.
Gracias por su respuesta, y porfavor espero que ahora me pueda ayudar.
Buen dia..

http://juaniquillo.com juaniquillo

Entonces ya tendría que ver mas con un un editor costumizado y no un plugin ya que va atado a tu sistema de permisos, ¿no?

http://www.zonarock.tk zonarock

Hola juaniquillo, tenias razon el probrera era ese, le puse language : “es”, y funciono.
Ahora, tengo 2 preguntas:

1 – Como hago para eliminar la opcion de crear directorios, osea que toda las imagenes se guarden por defecto en el mismo directorio, por ejemplo misuploads, y que aparesca defrente la lista de imagenes thumbnails.

2 – En donde defino el maximo de ancho de una imagen a subir, por ejemplo quisiera que cuando se suba una imagen de mas de 530-ancho la redimencione a 530-ancho y alto en proporcion, ¿Es posible hacer esto con tu Plugin?

Gracia tu pluigin esta de la ptm…

http://juaniquillo.com juaniquillo

Lo de eliminar los directorios no es tan complicado si sabes PHP, pero toma algo de tiempo. Necesitas re-organizar el “switch” principal de la página “filebrowser.php” y cambiar la consulta para que enseñe todos los archivos y no los de un directorio específico.

En cuanto a lo de re-dimensionar imágenes, el plugin no lo hace. Aunque sí puedes especificar hasta que tamaño se permiten subir las imágenes. Por defecto el tamaño es 4194304 bytes. Lo puedes cambiar en la página “include/validacion.inc.php”, en la linea 191:
if($_FILES['archivo']['size'][$key2] > 4194304) $mensaje_err .= $mensaje_glob_v[6];

http://www.zonarock7@hotmail.com zonarock

Muchas gracias juaniquillo boy a tratar de acerlo…

http://webstudio.com.bo fuel sirpa mamani

Hola, tengo un problema al instalar el jfilebrowser, me sale el siguiente error:

Notice: Undefined index: seccion in C:\wamp\www\test\tiny\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 14

Notice: Undefined index: id in C:\wamp\www\test\tiny\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 15

Notice: Undefined index: cat in C:\wamp\www\test\tiny\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 16

Notice: Undefined index: set_c in C:\wamp\www\test\tiny\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 17

Notice: Undefined index: busqueda in C:\wamp\www\test\tiny\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 18

Quisiera saber porq el error?

Gracias.

http://juaniquillo.com juaniquillo

Eso pasa porque no he tenido en cuenta los Notices, en este caso no he definido algunas variables antes de usarlas. En tu servidor de producción no tendrás que preocuparte por los Notices, pero si usas ese modo de mostrar errores en tu servidor de desarrollo ya debes estar acostumbrados a esos Notices.

LaMaquina2

muy bueno muy bueno muy pero muy bueno tu plugin
lo andaba buscando ia dias estoy trabajando en el para modificarle
unas cosillas cuando lo tenga lo publicare si se puede aqui

Para quitarle los Notice en filebrowser.php y ya
error_reporting(E_ALL & ~E_NOTICE);
error_reporting(0);

lo que le estoy modificando es poderle colocar dimension
aliniamientos y siertas cosillas por alli claro con tu permiso para poderlo
poder subir nuevamente

http://juaniquillo.com juaniquillo

Claro que sí. Puedes modificar el código como quieras. Yo también estoy trabajando en la nueva versión del plugin. Ya sabes que si incluyes algo que quiera agregar al plugin te voy a pedir permiso para hacerlo, así que deja tu email si puedes.

LaMaquina2

bueno estoy en eso tiene como problemillas por ejemplo cuando subes una archivo que el nombre contenga acentos no te los sube no se si es problema de la base de datos… bueno mi correo es Ottoqbta@gmail.com para cualquier cosa alli stoy ahhh no soy muy experto en php estoy recien iniciando pero igual cualquier cosa para servirte

http://juaniquillo.com juaniquillo

¿Y te da algún error PHP? Me imagino que el problema debe ser la base de datos. Yo he podido subir archivos con acentos y eñes perfectamente. En el demo puedes ver que he subido un archivo “ejemplo ñíáó.txt” en el directorio llamando “prueba”. Si pones la vista de “lista” podrás ver los nombres de lso archivos.

Federico

@juaniquillo:

No tengo más palabras que de agradecimiento, realmente me sacaste de un apuro y el explorador de archivos cumple con las funciones necesarias.

Muchas gracias por tu aporte.

Saludos desde Uruguay.

PD: tengo una pequeña consulta:

Intenté pasar a español el tinymce pero no pude, debo estar errandole en algo, baje el .xml y lo puse en la carpeta correspondiente y luego en el tinyMCE.init() puse language : “es”,
A alguien se le ocurre donde tengo el error?

Gracias.

http://juaniquillo.com juaniquillo

La verdad es que nunca he intentado cambiar el idioma del editor pero ya te dejaré saber siencuentro alguna solución a tu problema

Blackver

El problema se soluciona sencillamente metiendo tambien el idioma en la carpeta lang del plugin, me paso igual.

Espero que te sirva de ayuda!. saludos!

Sam

Hola juaniquillo, de verdad, felicidades x este maravillos plugin, esta genial. Solo que tengo un problema, he cambiado la ruta de donde se almacenan las imagenes, he seguido los pasos que le sugieres…

1- filebrowser.php – línea #22
2- include/validacion.inc.php – linea #162, linea #218 y linea #260

y lo he conseguido, excepto que cuando selecciono ver yhumbs, no me muestra la imagen, me muestra una imagen con el mensaje de error “la imagen no pudo ser cargada”, ojala puedas ayudarme, te lo agradecere muchisimo.

http://juaniquillo.com juaniquillo

Si, ya vi el error. También necesitas cambiar en la linea número 171 del archivo “filebrowser.php” esto:

<a href="filebrowser.php?seccion=4&id=" title=""><img src="img.php?file=archivos/&ancho=75&alto=75&cut" width="75" height="75" alt="" />

por lo siguiente:

<a href="filebrowser.php?seccion=4&id=" title=""><img src="img.php?file==&ancho=75&alto=75&cut" width="75" height="75" alt="" />

y en la 309, donde dice:

<img src="img.php?file=archivos/&ancho=350&alto=255" alt="" />
por
<img src="img.php?file=&ancho=350&alto=255" alt="" />
No he probado la solución pero supongo que eso funcionará.

Daniel

Hola buenas tardes.
Soy un novato en este tema y me gustaría añadir el plugin que comentais para el TinyMCE.
Tengo la siguiente configuración del TinyMCE pero no me aparece el botón del jflibrowser.

tinyMCE.init({ // General options mode : "textareas", theme : "advanced", plugins : "jfilebrowser", plugins : "safari,pagebreak,style,layer, table,save,advhr ,advimage,advlink,emotions,iespell, inlinepopups,insertdatetime,preview,media,searchreplace, print,contextmenu,paste,directionality,fullscreen,noneditable, visualchars,nonbreaking,xhtmlxtras,template",
// Theme options theme_advanced_buttons1 : "bold,italic,underline, strikethrough,|,jfilebrowser,justifyleft, justifycenter,justifyright, justifyfull", theme_advanced_buttons2 : "cut,copy, paste,pastetext,|,search, replace,|,preview,bullist,numlist,|, outdent,indent,blockquote,|,undo,redo,|, link,unlink,anchor", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Example content CSS (should be your site CSS) content_css : "css/content.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "lists/template_list.js", external_link_list_url : "lists/link_list.js", external_image_list_url : "lists/image_list.js", media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin template_replace_values : { username : "Some User", staffid : "991234" } });

He seguido las intrucciones de instalación, pero sigue sin salirme el boton en cuestión.
¿¿Me podeis ayudar??
¡¡Gracias!!

http://juaniquillo.com juaniquillo

Yo no veo ningún error en el código a simple vista. Has incluido la carpeta de jFileBrowser en la carpeta de plugins?

http://www.educalandia.net anibal

Hola
Tengo el siguiente codigo y no aparece el boton del browser y he seguidos tus pasos al pie de la letra …
Alguna sugerencia y orientacion para solucionarlo?

Documento sin título

tinyMCE.init({ // General options mode : "textareas", theme : "advanced", plugins :"pagebreak,style,layer,table,save,advhr,advimage, advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media, searchreplace,print,contextmenu,paste,directionality,fullscreen, noneditable,visualchars,nonbreaking,xhtmlxtras,template, wordcount,advlist,autosave,jfilebrowser,ibrowser", // Theme options theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough, |,justifyleft,justifycenter,justifyright,justifyfull,styleselect, formatselect,fontselect,fontsizeselect,jfilebrowser", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace, |,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo, |,link,unlink,anchor,image,cleanup,help,code,|,insertdate, inserttime,preview,|,forecolor,backcolor,jfilebrowser,ibrowser", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|, charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|, fullscreen,|,ibrowser,jfilebrowser", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|, styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars, nonbreaking,template,pagebreak,restoredraft,jfilebrowser", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Example content CSS (should be your site CSS) content_css : "css/content.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "lists/template_list.js", external_link_list_url : "lists/link_list.js", external_image_list_url : "lists/image_list.js", media_external_list_url : "lists/media_list.js", // Style formats style_formats : [ {title : 'Bold text', inline : 'b'}, {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}}, {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}}, {title : 'Example 1', inline : 'span', classes : 'example1'}, {title : 'Example 2', inline : 'span', classes : 'example2'}, {title : 'Table styles'}, {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'} ], // Replace values for the template plugin template_replace_values : { username : "Some User", staffid : "991234" } });
Elmer

Hola, gracias por el plugin, pero tengo un problema, cuando sale la ventana de jfilebrowser, me salen estaas notificaciones:

Notice: Undefined index: seccion in C:\www\includes\tinymce\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 14 Notice: Undefined index: id in C:\www\includes\tinymce\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 15 Notice: Undefined index: cat in C:\www\includes\tinymce\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 16 Notice: Undefined index: set_c in C:\Jaspher\includes\tinymce\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 17 Notice: Undefined index: busqueda in C:\www\includes\tinymce\jscripts\tiny_mce\plugins\jfilebrowser\filebrowser.php on line 18

Uso IIS 7.5, y php 5
Por favor una ayudda, y gracia otra vez
LaMaquina2

creo que esa pregunta ia esta resuelta arriba

Para quitarle los Notice en filebrowser.php coloca
en la parte de arriba
error_reporting(E_ALL & ~E_NOTICE);
error_reporting(0);
lo que de dice es que no te reporta los notice, los notice aparecen porque no estan inicializadas las variasbles pero no es error
maguis0401

excelente no pense que se pudiera hcer cosas tan utiles como estas sigue asi
http://todoproblemaslamp.wordpress.com Jordi

¡Excelente aporte, juaniquillo! Yo intento solucionar este problema de una forma más sencillica con el Zend. Os dejo a continuación la idea-solución, por si a alguien le interesa.

http://todoproblemaslamp.wordpress.com/2010/12/05/%C2%A1programa-tu-plugin-de-subida-de-imagenes-para-tinymce-con-zend-framework/

Saludos

http://juaniquillo.com juaniquillo

Gracias por el aporte Jordi. Saludos.

http://www.chocohospedaje.com IkaroRaul

Buenas, tu browser es EXCELENTE!!!! me salvaste el dia, ahora con tu permiso lo modificare un poco para que me permita colocarle.
1. SUMIR MULTIPLES ARCHIVOS
2. ASIGNARLES KEYWORS a las imagenes, asi el buscador sera mas potente y no se limitara al nombre de la imagen.

Un saludo y Feliz navidad… y una vez mas GRACIAS!!!!

http://juaniquillo.com juaniquillo

Eres bienvenido a modificarlo como quieras. Yo estoy trabajando en una versión nueva usando Programación Orientada a Objetos. Espero sacarla pronto.

http://www.chocohospedaje.com IkaroRaul

Huy, vi que tiene para subir multiples archivos!!! ERES UN GENIO!!! ya tengo lo de los keywords, y el buscador ya lo modifque, apenas lo tenga bien pulido lo subo por si alguien mas lo necesitase, claro esta con tu permijo JUANILLO, JUANIRILILIJILLO!!!!

GRANDE MAESTRO

Saludos desde Bolivia

http://juaniquillo.com juaniquillo

Se agradecen las modificaciones. Yo ya lo había hecho la parte PHP para subir archivos múltiples pero todavía me falta la parte javascript, la cual es la más difícil para mí.

Saludos

Arturo Dalla Torre

Juanuquillo ¡¡

Felicitaciones por este gran plugin.

Sabes, he podido instalar el plugin sin ningun problema; sin embargo cuando adjunto un archivo y lo envio por correo, al lo recibo me manda el la url incorrecta (es decir, al hacer clic en el enlace no me lleva al directorio correcto). Me he fijado que al situar el raton encima del enlace el link que me muestra el navegador es:
“http:///carpeta/subcarpeta/sub-subcarpeta/tiny_mce/plugins/jfilebrowser/archivos/20101224152150_0.pdf”

pero fataria el nombre del dominio, ya que la url correcta deberia ser:
“http://www.miweb.com/carpeta/subcarpeta/sub-subcarpeta/tiny_mce/plugins/jfilebrowser/archivos/20101224152150_0.pdf”

Porfavor, me puedes ayudar a solucionar esto, que crees que este pasando ?
Gracias por adelantado

http://juaniquillo.com juaniquillo

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 : false

Arturo Dalla Torre

gracias por tu pronta respuesta Juaniquillo.

Ya me he fijado en la TinyMCE.init y efectivamente estan correctas asi:

convert_urls : false,
relative_urls : false,

No sé que otra cosa puede estar sucediendo, el unico error que se me presenta como te comentaba es que falta el nombre del dominio en la url, de resto esta perfecta.

Arturo Dalla Torre

creo que el problema está en que estoy tratandolo de integrar con phpBB,tal vez por eso no me toma la url completa.

Juaniquillo me puedes recomendar alguna modificación al codigo de filebrowser.php en mi caso particular, para que los enlaces me tomen la url completa (en mi caso sería http://*www.miweb.com*/carpeta/subcarpeta/sub-subcarpeta/tiny_mce/plugin/jfilebrowser/archivos/el_archivo.pdf

Lo que esta entre * es lo que le falta.

Gracias por adelantado, si no me puedes ayudar igual gracias.

http://juaniquillo.com juaniquillo

Nunca he usado phpBB pero aún así no creo que ese sea el problema. Lo único que se me ocurre es que TinyMCE todavía está cambiando la ruta ya que el plugin usa rutas absolutas, no relativas. ¿Has intentado ver el HTML cuando se inserta una imagen?
http://juaniquillo.com juaniquillo

También encontré esto:
http://tinymce.moxiecode.com/forum/viewtopic.php?id=642

Espero que te ayude
Arturo Dalla torre

Hola Juaniquillo, estuve implementando el artículo que me pasaste y no me funcionó, de hecho, probé colocando relative_urls : false o true (y no hay cambio alguno).
Cuando veo el código html del objeto insertado se ve asi “”.
He tratado de probar mil formas de incluir el dominio “www.miweb.com” antes de la ruta antes mencionada pero no he podido, he tratado de incluirlo en varias posiciones de esta parte (linea22 – filebrowser.php):
$ruta_completa_ar = str_replace(‘filebrowser.php’, ”, $_SERVER['PHP_SELF']).’archivos/’;
Y aquí también (linea307 – filebrowser.php):
<a href="” title=”" target=”_blank”>
No tendrás alguna idea de cómo incluir el dominio fijo antes de la ruta que me arroja.
Gracias por tu interés en ayudarme a aclarar esto.

Arturo Dalla torre

Hola, Juaniquillo

Estoy FELIZ ¡¡
Hoy, después de 2 dias logre solucionar el problema..
Estaba a punto de perder la cabeza, cuando manualmente logré asignarle la dirección correcta.

Gracias Juaniquillo, ahora si aprovecharé al 100% tu plugin ¡¡

http://juaniquillo.com juaniquillo

¿Y al final como lo hiciste? ¿Tuviste que cambiar el código javascript del plugin?
Arturo Dalla torre

Hola de nuevo Juaniquillo, discúlpame por no responderte a tiempo, es que estado bastante ocupado.

Lo que hice fue modificar el archivo filebrowser.php

linea 22 –> $ruta_completa_ar = str_replace(‘filebrowser.php’, ”,”).’http://www.tuweb.com/tiny_mce/plugins/jfilebrowser/archivos/’;

Espero que alguien le sirva esta solución.
Saludos.

Juanjo

Buenas, ante todo y según he visto en la demo el plugin parece ser expléndido, justo algo que estaba buscando. La pregunta es si se podría utilizar el plugin sin que hiciera uso de MYSQL. Gracias

http://juaniquillo.com juaniquillo

Lo siento pero no se puede. Este plugin está hecho para que funcione con MySQL ya que es donde se almacena toda la información.

http://www.FotoNaturaleza.net Mauricio

Hola.
Lo felicito por el plugins.

Una cosa.
Hice todo como esta en instalar.txt pero en la carpeta lang falta el archivo es.js para los que tienen el editor en español, así no da errores, debería incluirlo en el zip, yo copie el en.js y lo renombre a es.js

Saludos!

http://juaniquillo.com juaniquillo

Gracias por la respuesta Mauricio. La verdad es que yo uso TinyMCE En ingles así que no hice un archivo esp.js. Lo tendré en cuenta para la próxima versión del plugin.

monrhu

Hola:

He estado intentar el plugin y nada mas no lo logro al trabajar sin el plugins veo bien el editor de textos al momento de incluir el “jfilebrowser” ya no aparece ninguno de los botones, no se si me puedas ayudar, mandame un correo y te mando el detalle de los codigos y las pantallas de error.
Saludos

http://juaniquillo.com juaniquillo

Si estás usando el idioma español mira la solución que ofrece Mauricio en el mensaje de arriba. Yo ya lo he cambiado también en el archivo de descarga así que puedes volver a descargarlo.

monrhu

Hola, muchas gracias por la respuesta ya logre conectarlo pero al iniciar me marca el siguiente error.

PHPPaging – Error
Hubo un error al intentar ejecutar la paginaci�n de los resultados. Por favor, comun�quese con el responsable de este sitio
PHPPaging v2.1 (20081114)

Ya revise el congif y las conexiones a mi base de datos estan correctas que podrá ser.

Saludos

monrhu

Perdón tanta lata y apor fin lo logre le cambie el nombre a mi base, tenia un caracter que no se reconia muy bien, gracias por plugin esta Excelente.

Saludos

http://juaniquillo.com juaniquillo

Que bueno que pudiste resolver los problemas. Saludos.
Rhual

Hola, otra vez dando lata con una consulta, sabes la manera de incrustar un video dentro del tinymce.
Lo que ando buscando es que sea facil al usuatrio y nada de editar codigo, algo como que solo pegara la ruta del video, el cual esta en youtube.
http://juaniquillo.com juaniquillo

Puedes usar el boton de insertar video. Si escoges flash y pones la dirección de un video de Youtuve lo inserta bien.

Cristian

Hola, antes de nada muchas gracias por compartir el pedazo de plugin!!
Acabo de instalarlo y funciona todo muy bien a excepción del thumbnail, el link de la imagen aparece roto, no se muestra la imagen, luego a la hora de añadirla la añade sin problemas, he intentado seguir el error tirando un poco de firebug pero no lo he encontrado.

El tag html que muestra es este:

La ruta de la imagen es correcta, entiendo que el error debe estar en img.php, no he tocado nada del codigo, esta recien desempaquetado del zip.

Un saludo y gracias.

http://juaniquillo.com juaniquillo

Si el problema son los thumbnails entonces el error tiene que ser de PHP. Por casualidad, ¿cuál es la versión de tu PHP?

Cristian

La version de php es 5.3.0

Me aparecian errores de la función ereg, deprecated, ademas de los tipicos notice de variable no declarada asi que he añadido al principio del archivo filebrowser.php, error_reporting(0);

¿Puede tener algo que ver la función ereg?

Gracias, un saludo.

http://juaniquillo.com juaniquillo

Ya lo sospechaba. El problema es PHPPaging, la clase de paginación que uso. Aqui puedes bajar una versión de la clase donde le he cambiado los ereg() por preg_match(): http://goo.gl/EhVRY

Cristian

Gracias Juaniquillo, he cambiado el archivo de paginación pero no he podido solucionar el problema, te adjunto un pantallazo.

http://img820.imageshack.us/i/thumbnailerror.jpg/

¿También tienes este problema con la version php 5.3.0? Que no este pasando yo algo por alto, aunque ya te digo que no he cambiado nada del source.

Un saludo.
Responder
http://juaniquillo.com juaniquillo

Pues no veo ningún eror PHP. Estás seguro que las rutas están bien? Si hubiera un error con los thumbsnails la clase te lo diría. Intenta poner una de las rutas en el navegador para ver si existe la imagen
Cristian

La imagen existe y la puedo abrir, creo que el problema esta en img.php

Lo que muestra el codigo html es esto:

La ruta en si de la imagen la puedo ver sin problema, pero si ejecuta la ruta con el img.php.

http://localhost/js/tiny_mce/plugins/jfilebrowser/img.php?file=archivos/20110228163755_0.jpg&ancho=75&alto=75&cut%22

Me muestra la ruta en formato .jpg, es decir una imagen con la ruta dentro.
:S

Gracias, un saludo.
http://juaniquillo.com juaniquillo

Así es que tiene que ser ya que los thumbnails se crean usando la clase PHPImagen. Entonces lo que no te funciona es la clase que crea los thumbs? También vi que tienes esto de más en la ruta “%22″. Puede que haya un espacio de más. Probaste poner:

http://localhost/js/tiny_mce/plugins/jfilebrowser/img.php?file=archivos/20110228163755_0.jpg&ancho=75&alto=75&cut

en el navegador? Dime que error tiene.

Jorge

Eres un genio, me gusta mucho, llevo intentando configurar algo sencillo muuuucho tiempo y al final en todos los pluggins que he probado algo no iba bien, pero esto es lo que necesitaba, carpetas, subir e insertar, nada más y nada menos. Lo he instalado en 20 minutos sin fallo alguno.

Las grandes cosas a veces son las que solo hacen lo que tiene que hacer sin más florituras.

Muchas gracias, de verdad.
http://cozuco.com xiomara

Muy buen plugin me he pasado dias tratando de configurar alguos opensource sin tener ningun exito, hasta que encontré este. Sin embargo al instalarlo me muestra estos errores:
Warning: include(PHPPaging.lib.php) [function.include]: failed to open stream: No such file or directory in /home/cyberdp/public_html/newsletter/tiny_mce/plugins/jfilebrowser/include/config.inc.php on line 22

Warning: include() [function.include]: Failed opening ‘PHPPaging.lib.php’ for inclusion (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/cyberdp/public_html/newsletter/tiny_mce/plugins/jfilebrowser/include/config.inc.php on line 22

Fatal error: Class ‘PHPPaging’ not found in /home/cyberdp/public_html/newsletter/tiny_mce/plugins/jfilebrowser/filebrowser.php on line 339

Si me puedes ayudar.

http://juaniquillo.com juaniquillo

Ese error quiere decir que no encuentra este archivo “PHPPaging.lib.php”. Verifica que ese archivo esté en el folder llamado “include”.

http://cozuco.com xiomara

Muchas gracias por la observacion, resuelto. Sucede que al publicar el programa FTP cambiaba los nombres de los archivos a minusculas. Solo cambié el nombre con el directorio de raiz y resuelto.

Excelente.

henso

hoal puedes aser una para este ta bueno el editor http://ckeditor.com/

http://juaniquillo.com juaniquillo

Hasta donde yo se ckeditor ya tiene un file browser. http://docs.cksource.com/File:CKEditor_Image_Dialog.png

henso

HOLA LO PUSE TODO PERO ME SALE EN EL Thumbnail ESTO

ERROR: LA IMAGENE NO PUDO SER CARGADA

pero cuando lo inserto al formulario osea campo de texto se me ve la imagen

que podria ser

henso

hola cuando va a salir el nuvo que estas aciendo xd

henso

ya esta ya lo eregle xd grasias sos un jenio jeje sabelo

hugo

hola buen dia un comentario
dice que este pluging lo usas para un CMS que estas creando
habria posibilidad que compartieras el CMS con la comunidad gracias

http://juaniquillo.com juaniquillo

El CMS que mencioné ya no lo estoy usando. Yo estoy trabajando en uno nuevo pero la verdad es que este plugin no está atado a ningún CMS específico. Yo lo trabajé de manera que se pueda usar con tinyMCE, no importa el CMS que se use.

Para compartir el nuevo CMS que estoy trabajando necesito aprobación de la compañía donde trabajo ya que lo he trabajado usando el tiempo asignado por ellos. Es algo que he pensado pero todavía no estoy seguro de querer hacerlo.

http://www.youtube.com/mac300989 Mac

Hola que tal excelente plug in yo iva a desarrollar uno pero me ganaste xD.
oee yo te quisiera ayudar, se jquery, ajax, php, mysql . y me parecio estupendo tu plugin. como puedo colaborar contigo?
por que no integras tu un tipo que tu bien conoces
$(‘.jtinymceajax’).jTinyAjax({
url: “index.php”
})
solo para hacer ajax y que recibas parametros multiples para cualquier cosa. asi como te comente en el otro post, y asi aprovechar ajax con un nuevo plugin para cualquier cosa.
a propsito quzias hacermas grande el boton eliminar no me di cuenta hasta la tercera vez que lo vi solo por que cheque el php me di cuenta xD.

http://juaniquillo.com juaniquillo

Gracias por el comentario. Yo he estado trabajando en la segunda versión de este plugin por algún tiempo peor no he terminarlo porque he tenido mucho trabajo últimamente. Una de las cosas que quiero hacer es hacer el UI más intuitivo, así que voy a estar trabajando en el botón de borrar. También pensaba subir el plugin a Github para tener un mejor control de las versiones y poder compartirlo mejor.

Eres bienvenido a colaborar. Aunque yo no lo podré trabajar por algunos meses me interesa mucho saber que podrías hacer para mejorarlo.

Saludos y gracias.

Mac

disculpa por no contactarte antes por lo de la contribucion para el plugin, pero de igual manera tuve trabajo gracias a Dios, recien vuelvo, pero tengo problemas para crear un plugin, como el tuyo y no se a que se deba el editor no lo reconoce . te poste en el ejemplo que pusiste espero puedas contestar..

Anónimo

Saludos de nuevo Mac. ¿Estás planeando compartir el plugin una vez lo termines? Si es así te podría ayudar dependiendo del tiempo que tenga disponible. Me comunico contigo esta noche cuando llegue a casa.

hugo

hola juan disculpa tienes algun tuto de como configurar TinyMCE desde cero gracias

http://juaniquillo.com juaniquillo

No tengo ninguno pero estoy seguro que podrás encontrar muchos de eso en google.

hugo

una pregunta en el sql que tabla usas archivos o categorias o que campos gracias?

http://juaniquillo.com juaniquillo

Archivos son los records de los archivos. Categorias lo uso para las carptetas.

marce

el scrip funciona pero solo quiero saber como canbio las rutas de donde se guardan las imagenes

la ruta de la imagen es esta

http://tuwebsite.com/tinymce/jscripts/tiny_mce/plugins/jfilebrowser/archivos/20110831200358_0.jpg

y quiero que sea asi

http://tuwebsite.com/archivos/20110831200358_0.jpg

como lo cambio
dese ya muchas gracias

http://juaniquillo.com juaniquillo

Yo respondo esta misma pregunta en el comentario número 8

marce

y como lo aria ? no tnego mucha conciensa en php xd

filebrowser.php – línea #21

///////////ruta donde estan los archivos
$ruta_completa_ar = str_replace(‘filebrowser.php’, ”, $_SERVER['PHP_SELF']).’archivos/’;

entonces quedaria asi o no

filebrowser.php – línea #21
///////////ruta donde estan los archivos
$ruta_completa_ar = str_replace(‘filebrowser.php’, ‘http://tuwebsite.com/archivos/’;

gracias

marce

y en este

if(!BorrarArchivo($id_archv_brr, $sql_db, $conexion_gal, $ruta.’archivos/’)) {

asi quedaria

if(!BorrarArchivo($id_archv_brr, $sql_db, $conexion_gal, $ruta.’http://tuwebsite.com/archivos/’)) {
http://juaniquillo.com juaniquillo

necesitas quitar la variable $ruta y hacer pruebas.

Blog de Juaniquillo