Buenas a todos, me gustaría compartir con vosotros como utilizar la ventana de ficheros que aparece cuando pulsas en adjuntar un archivo en el ckeditor desde una jsp o una aplicación de vaadin.

Uso del buscador de ficheros de CKeditor desde una jsp

Podemos llamar a la ventana del sistema de archivos del servidor y recibir la dirección de cualquier documento o imagen en una jsp.

Pasos

1. Abrir el archivo donde se realiza la respuesta al seleccionar un documento o imagen
   Abrir el archivo: {path}/browserDMC.html es una copia modificada de \html\js\editor\ckeditor\editor\filemanager\browser\liferay\browser.html la cual debemos copiar en nuestro portlet con los cambios indicados en ésta página.
   
   Debemos copiar también en nuestro proyecto {path}/frmresourceslistDMC.html que es una copia al igual que la anterior de la del core de liferay localizada en \html\js\editor\ckeditor\editor\filemanager\browser\liferay\frmresourceslist.html
   
   Se ha de tener en cuenta que estos cambios han sido realizados en la versión 6.0.6 por lo que en versiones diferentes podrían haber variaciones
2. Modificar la función OpenFile:
   Debemos modificar la siguiente linea:
   
   1window.top.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);
   
   
   Por este fragmento de código
   
   1try {
   2window.top.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);   
   3}
   4catch (e) {
   5window.top.opener.callFunction(fileUrl)
   6}
   
   
   
3. Recibir parámetros en la jsp
   
   Añadir función js que recibira el parámetro desde la ventana del ckeditor
   
   1function callFunction(fileUrl){
   2document.getElementById("urlDocumento").href = fileUrl;
   3document.getElementById("urlDocumento").style.display = "inline";
   4}
   
   
   
   Texto que tendrá la url recibida
   
   1<a name="urlDocumento" id="urlDocumento" href="" target="_blank" style="display:none">Pulsa aquí para descargar el documento seleccionado</a>
   
   

Se han adjuntado a esta página de la wiki los siguientes archivos de ejemplo para ver su implementación

browserDMC.html
frmresourceslistDMC.html
view.jsp


Uso del buscador de ficheros de CKeditor desde Vaadin

Podemos llamar a la ventana del sistema de archivos del servidor y recibir la dirección de cualquier documento o imagen en un componente de vaadin.

Pasos

1. Abrir el archivo donde se realiza la respuesta al seleccionar un documento o imagen
   Se realiza lo mismo que en el paso 1 del apartado anterior
   
2. Modificar la función OpenFile:
   Se realiza lo mismo que en el paso 2 del apartado anterior
   
3. Recibir parámetros en el componente de vaadin
   Enlace que llama a la funcion js que esta en /js/main.js la cual abre el popup de ficheros de ckeditor
   
   1Label label = new Label("<div class=\"v-button\"><span class=\"v-button-wrap\"><a href=\"/DocumentLibraryExtension-portlet/browserDMC.html?Connector="+connectorURL+"&CKEditor=CKEditor1&CKEditorFuncNum=1&langCode=es\" target=\"_blank\" class=\"v-button-caption\">Seleccionar Fichero</a></div></div><a name='urlDocumento' id='urlDocumento' href='' target='_blank' style='display:none'>Pulsa aquí para descargar el documento seleccionado</a><div />", Label.CONTENT_XHTML);
   
   
4. Añadir la función javascript necesaria, se puede escribir directamente en js/main.js
   
   1function callFunction(fileUrl){
   2document.getElementById("urlDocumento").href = fileUrl;
   3document.getElementById("urlDocumento").style.display = "inline";
   4}
   

Se han adjuntado a esta página de la wiki los siguientes archivos de ejemplo para ver su implementación:
InicioComponent.java
browserDMC.html
frmresourceslistDMC.html
main.js

Attachments:

InicioComponent.java (2.0k), browserDMC.html (6.3k), frmresourceslistDMC.html (5.8k), main.js (0.2k), view.jsp (1.5k)

¡Wow, Daniel! ¡Muchas gracias por compartir!
Un saludo,
Juan

Gracias a vosotros por todo lo que facilitáis la vida a la gente.

No comparto todo lo que me gustaría pero a ver si saco un huequillo cada mes para ir compartiendo todo con lo que me voy cruzando.

Saludos!