Integrar CKEditor con CKFinder WYSIWYG Editor

Haremos un ejercicio completo que comprenderá desde la instalacion de CKEditor en tu sitio hasta la integracion de CKFinder con CKEditor.

Lo primero que haremos será descargar nuestro editor CKEditor y nuestro administrador de archivos web CKFinder de su sitio oficial, cualquiera de las opciones Basic Package, Standar Package, Full Package nos servirá para trabajar. La diferencia de cada uno radica en los elementos (botones) que se presentarán en nuestro editor:

Descargar CKEditor from sitio oficial

Luego de descargarlo vamos a integrarlo en nuestra pagina web de la siguiente manera. En la seccion Head de nuestra página vamos a agregar el siguiente código:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<script type="text/javascript" src="ckfinder/ckfinder.js"></script>

 Donde SRC muestra la ruta donde se encuentra la carpeta CKEditor & CKFinder que descargaste anteriormente:

Referenciar librerias CKEditor en nuestra pagina web

Para que tengan una idea de como tengo mis archivos les muestra esta imagen:

Ubicacion de archivos en Xampp

Vamos a ver una muestra de como se ve cuando lo vemos en nuestro localhost:

Ahora vamos a probar la subida de archivos dando click en el icono imagen junto al icono flash:

Al dar en el boton "Send it to the Server", probablemente experimentes el siguiente error:

La solucion para este problema checkAuthentication function la cual se encuentra en el archivo config.php de la carpeta CKFinder, cambiar a TRUE a la variable return, asi:

Guardamos los cambios en dicho archivo y ahora si vamos a subir una imagen en nuestro editor:

Sencillo y corto pero espero les sirva, por acá les dejo un poco de la documentacion utilizada para dichos editores y administradores de archivos.

http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration 

http://docs.ckeditor.com/#!/guide/dev_file_browse_upload

http://docs.ckeditor.com/#!/guide/dev_file_browser_api

Saludos desde El Salvador!