Integrar KCFinder en CKEditor 4

Integrar KCFinder en CKEditor 4

Cuando hemos desarrollado un blog desde cero o con algún framework y vamos a crear el área de administración o backend del mismo es muy probable que deseemos contar con un editor de texto enriquecido o WYSIWYG, y uno de los más usados hoy en día es CKEditor ya que es gratuito (aunque posee versión de pago) y brinda una serie de funcionalidades muy atractivas a la hora de generar contenido. Pero al trabajar con la versión gratuita nos encontramos con una gran desventaja y es que no posee integrada la herramienta CKFinder (la cual si posee la versión de pago) para administrar archivos a través del navegador y poder insertarlos en los contenidos.

Para solucionar este problema existe una herramienta similar y gratuita llamada KCFinder y en este artículo estaremos integrando la funcionalidad de KCFinder con el reconocido editor de texto CKEditor.

En el presente artículo se usará la versión 2.51 de KCFinder y la versión 4.2.1 de CKEditor, por lo tanto si tus versiones son diferentes tal vez los pasos para lograr la integración sean un poco diferentes. A continuación los pasos que debemos llevar a cabo para realizar la integración exitosa:

PASO 1: Descargar los paquetes

Lo primero que debemos hacer es descargar CKEditor (les recomiendo el paquete Full) desde este enlace de su sitio web y KCFinder también desde este enlace de su sitio web.

PASO 2: Instalar CKEditor y KCFinder

Ahora instalaremos CKEditor en el sitio web. Para ello descomprimos el paquete que descargamos y lo subimos a un directorio en el servidor. Podemos eliminar la carpeta samples ya que solo posee ejemplos de funcionamiento del editor.

Luego descomprimimos el paquete de KCFinder y lo ubicamos dentro de la instalación de CKEditor.

PASO 3: Mostrar el editor

Para mostrar el editor en alguna de las vistas del sitio web debemos incluir el paquete de CKEditor.

<script src="ckeditor/ckeditor.js"></script>

Lo recomendable es ubicar este llamado antes de cerrar la etiqueta body del documento.

Luego deben crear un campo de tipo textarea de la siguiente manera:

<textarea class="ckeditor" name="editor" id="editor"></textarea>

Con eso bastaría para que en su sitio web se visualice el editor de la siguiente manera:

CKEditor instalado correctamente

Ahora bien si hacen clic al botón llamado Imagen les aparecerá la siguiente ventana:

Administrador de imágenes sin opción de carga

Y se darán cuenta que esta ventana no posee la pestaña para cargar archivos, la cual si está disponible en el demo online de CKEditor. Esto lo vamos a solucionar gracias a KCFinder.

PASO 4: Integrar el KCFinder

En primer lugar vamos al archivo config.js de la instalación de CKEditor y vamos a colocar las siguientes líneas:

CKEDITOR.editorConfig = function(config) {
    config.filebrowserBrowseUrl = '/ckeditor/kcfinder/browse.php';
    config.filebrowserImageBrowseUrl = '/ckeditor/kcfinder/browse.php?type=images';
    config.filebrowserFlashBrowseUrl = '/ckeditor/kcfinder/browse.php?type=flash';
    config.filebrowserUploadUrl = '/ckeditor/kcfinder/upload.php?type=files';
    config.filebrowserImageUploadUrl = '/ckeditor/kcfinder/upload.php?type=images';
    config.filebrowserFlashUploadUrl = '/ckeditor/kcfinder/upload.php?type=flash';
};

Con estas lineas habilitaríamos la pestaña cargar del administrador de imágenes como se muestra en la siguiente imagen:

Administrador de imágenes con opción de carga

Ahora solo resta configurar el directorio donde subiran los archivos, eso lo vamos a hacer en el config.php de la instalación de KCFinder de la siguiente manera:

'uploadURL' => "/assets/img"

Con eso ya tendremos integrado KCFinder con CKEditor y podremos subir imágenes, animaciones flash y archivos al servidor.

Espero les haya sido de utilidad y lo compartan para que otras personas también aprendan a realizar la integración.

Comentarios

Deja tu comentario

http://