Usar Browser Server de CKEditor en una jsp o en una aplicación vaadin

[Daniel Martínez Cisneros，修改在11 年前。]

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

• 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
• Modificar la función OpenFile:
  Debemos modificar la siguiente linea:
  

  window.top.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);

  
  
  Por este fragmento de código
  

  try {
  window.top.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);	
  }
  catch (e) {
  window.top.opener.callFunction(fileUrl)
  }

  
  
• Recibir parámetros en la jsp
  
  Añadir función js que recibira el parámetro desde la ventana del ckeditor
  

  function callFunction(fileUrl){
  document.getElementById("urlDocumento").href = fileUrl;
  document.getElementById("urlDocumento").style.display = "inline"; 
  }

  
  
  Texto que tendrá la url recibida
  

  <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

• 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
  
• Modificar la función OpenFile:
  Se realiza lo mismo que en el paso 2 del apartado anterior
  
• 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
  

  Label label = new Label("<div class="\&quot;v-button\&quot;"><span class="\&quot;v-button-wrap\&quot;"><a href="\&quot;/DocumentLibraryExtension-portlet/browserDMC.html?Connector=&quot;+connectorURL+&quot;&amp;CKEditor=CKEditor1&amp;CKEditorFuncNum=1&amp;langCode=es\&quot;" target="\&quot;_blank\&quot;" class="\&quot;v-button-caption\&quot;">Seleccionar Fichero</a></span></div><a name="urlDocumento" id="urlDocumento" href="" target="_blank" style="display:none">Pulsa aquí para descargar el documento seleccionado</a><div></div>", Label.CONTENT_XHTML);

  
  
• Añadir la función javascript necesaria, se puede escribir directamente en js/main.js
  

  function callFunction(fileUrl){
  document.getElementById("urlDocumento").href = fileUrl;
  document.getElementById("urlDocumento").style.display = "inline"; 
  }

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

[Juan Fernández，修改在11 年前。]

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

[Daniel Martínez Cisneros，修改在11 年前。]

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