Forums

Home » Liferay Portal » Español » 3. Desarrollo

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Daniel Martínez Cisneros
Usar Browser Server de CKEditor en una jsp o en una aplicación vaadin
October 3, 2012 5:00 AM
Answer

Daniel Martínez Cisneros

Rank: Junior Member

Posts: 27

Join Date: July 1, 2011

Recent Posts

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)
Juan Fernández
RE: Usar Browser Server de CKEditor en una jsp o en una aplicación vaadin
October 3, 2012 5:25 AM
Answer

Juan Fernández

LIFERAY STAFF

Rank: Liferay Legend

Posts: 1250

Join Date: October 2, 2008

Recent Posts

¡Wow, Daniel! ¡Muchas gracias por compartir!
Un saludo,
Juan
Daniel Martínez Cisneros
RE: Usar Browser Server de CKEditor en una jsp o en una aplicación vaadin
October 5, 2012 12:21 AM
Answer

Daniel Martínez Cisneros

Rank: Junior Member

Posts: 27

Join Date: July 1, 2011

Recent Posts

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!

Juan Fernández:
¡Wow, Daniel! ¡Muchas gracias por compartir!
Un saludo,
Juan