domingo, 22 de enero de 2012

Integrar ckfinder en ckeditor

Para insertar imágenes desde ckeditor tenemos que hacerlo con imágenes desde una url, pero con ckfinder podemos añadir a ckeditor la funcionalidad de subir archivos de imagen a nuestro servidor para posteriormente ser utilizadas desde ckeditor.

Ckfinder lo podemos descargar de forma gratuita desde su web http://ckfinder.com/. Una vez descargado pondremos la carpeta de ckfinder en el mismo nivel que la carpeta de ckeditor en el sistema de archivos de nuestra web (esta ruta la podemos variar ya que la especificaremos a la hora de aplicar ckfinder a ckeditor).

Lo primero será configurar la carpeta donde se guardarán las imágenes con ckfinder. Para ello abrimos el archivo el archivo config.php situado en la carpeta raiz de ckfinder y sobre la linea 63 modificaremos el valor de la variable $baseUrl:
$baseUrl = '/miweb/';
De este modo, las imágenes que subamos se guardarán en la carpeta miweb/images/

Para utilizar ckfinder y ckeditor en nuestros formularios, lo primero sera incluir los ficheros javascript de ckfinder y ckeditor:
<script src="./ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="./ckfinder/ckfinder.js" type="text/javascript"></script>
A continuación el formulario con el textarea donde incluiremos el editor ckfinder con ckeditor:
<textarea cols="40" name="mitextarea" rows="5"></textarea>
<script type="text/javascript">
  var editor=CKEDITOR.replace('mitextarea',{customConfig : 'myconfig.js'});
  editor.setData('<p>pulsa en el <b>boton</b></p>');
  CKFinder.setupCKEditor(editor, './ckfinder/') ;
</script>
En el código vemos como aplicamos ckeditor al textarea mitextarea, reemplazando la configuracióm por defecto de ckeditor por una nuestra personalizada en el archivo myconfig.js (en el post Configurar ckeditor explico como crear esta configuración personalizada). A continuación se establece el texto por defecto para el textarea y se aplica ckfinder a la instancia editor que hemos creado de ckeditor, especificando mediante ./ckfinder/ donde se encuentra ckfinder.

15 comentarios :

  1. Hola, buen trabajo, de hecho hasta ahora eres el único que tiene un manual que realmente funciona con las versiones actuales ya que he probado con otros manuales o guias y no funcionan, lamentablemente ckfinder no es gratuito, como otros filemanger.

    ResponderEliminar
    Respuestas
    1. Gracias. En cuanto a lo de la licencia, si necesitas un buen filemanager para tu proyecto puede que te compense pagarla. Creo que eran unos 59€, que tampoco es tanto y siempre tienes la posibilidad de imputarle el gasto a tu cliente o si tienes margen asumirlo tu mismo

      Eliminar
  2. de lujo esto es lo que estaba buscando! gracias es la única info que me sirvió! muy agradecido

    ResponderEliminar
  3. Hola:
    he descargado los dos programas, pero nosé en dónde editar las lineas que piden cambiar,perdonen mi ignorancia.
    Podrían ayudarme?
    en qué archivo debo cambiar estas lineas?
    Espero respuesta,muchas gracias.-

    ResponderEliminar
    Respuestas
    1. Simplemente tienes que añadir las líneas que indico en el fichero donde tengas el textarea en el cual quieres emplear CKEditor y CKFinder, teniendo en cuenta la ruta dónde se encuentran los javascript de CKEditor y CKFinder

      Eliminar
  4. Hola, muchas gracias por el tutorial, al fin he podido integrar ckfinder en ckeditor! Pero tengo un pequeño probema: al ir a subir una imagen me dice que no encuentra la carpeta en el servidor, tengo en el archivo config.php de ckfinder $baseUrl = '/ckfinder/userfiles/' (por defecto) pero me surge este problema y no se como solucionarlo... Muchas gracias por adelantado!

    ResponderEliminar
    Respuestas
    1. Te cuidado con la ruta absoluta de $baseUrl, prueba a poner :

      $baseUrl = 'http://example.com/ckfinder/userfiles/';

      Eliminar
  5. hola ahora me aparece un error, de todas formas se los comento aunque me imagino que debe tratarse de un problema de configuración, es el siguiente<.
    "El navegador de archivos está deshabilitado por razones de seguridad. Por favor, contacte con el administrador de su sistema y compruebe el fichero de configuración de CKFinder."
    buscaré en la web, sin embargo estoy muy agradecida por la ayuda, simple y lo mejor es que funciona

    ResponderEliminar
  6. hola que alternativas gratuitas de ckfinder me recomiendan gracias!

    ResponderEliminar
  7. esto es para joomla drupal? o para codficacion normal? yo estoy trabajando con Dreamweaver

    ResponderEliminar
    Respuestas
    1. Codificación normal. Ya sea joomla, drupal o trabajes con dreamweaver,únicamente tienes que incluir las líneas de código indicadas y los correspondientes ficheros de ckeditor y ckfinder

      Eliminar
  8. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  9. hola como estas, tengo el mismo problema de maria jose,

    "El navegador de archivos está deshabilitado por razones de seguridad. Por favor, contacte con el administrador de su sistema y compruebe el fichero de configuración de CKFinder"

    si alguien sabe como solucionarlo me vendría de 10.
    no se si sera por la configuración de la url: la mía es la siguiente: $baseUrl = '/ckfinder/userfiles/';

    desde ya muchas gracias

    ResponderEliminar
  10. Q tal, excelente tutorial, pero me surge una duda: hasta q punto es recomendable utilizar la version demo del ckfinder, es decir, quiza con el tiempo expirara (tendra dias de evaluacion como otros programas) o dejara de funcionar??? gracias

    ResponderEliminar