Hoy, por petición de un lector, vamos a ver como añadir a CKEditor un navegador de archivos que nos permite subir archivos e insertar imágenes al servidor. Para ello vamos a hacer uso de CKFinder, el navegador en cuestión.
Así se ve CKFinder
Lo primero que tenemos que hacer es descargarnos CKFinder y colocarlo en el mismo sitio donde tenemos la carpeta de CKEditor, aunque esto no es obligatorio si es recomendable. Para el tutorial vamos a usar la versión para PHP. Tiene que quedar de la siguiente manera:
Disposición de los archivos
Una vez que tenemos esto solo tenemos que incluir la librería de CKFinder y hacer que este sea el navegador y gestor de nuestros archivos. Para ello nos basta con el código siguiente (corregido gracias a los lectores):
<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="./ckfinder/ckfinder.js"></script>
<script type="text/javascript">
window.onload = function()
{
editor = CKEDITOR.replace('editor');
CKFinder.setupCKEditor( editor, '/ckfinder/' );
}
</script>
De esta forma usamos CKFinder para que nos configure el editor, sin tener que tocar la configuración de este. Hay también métodos para hacer mediante la configuración de CKEditor, pero son más complejos y esto tampoco es un tutorial extensivo.
Así se ve el Pop Up de imagen
Si probamos esto veremos que no funciona, que nos da un error de configuración. Para solucionar esto tenemos que editar el archivo config.php. Buscaremos una función que se llama CheckAuthentication. Esta función devuelve true si el usuario tiene permiso para usar CKFinder y false si no lo tiene. Como podemos ver por defecto devuelve false. Aquí deberiamos comprobar si el usuario ha iniciado sesión, los permisos o roles que tiene asignado, etcétera; y en función de esto devolver lo que corresponda. Para hacer la prueba vamos simplemente a hacer que devuelva true:
function CheckAuthentication()
{
return true;
}
Ahora si nos dejará tanto subir archivos como seleccionar estos una vez subidos.
Tags: CKEditor, Editor WYSIWYG, tutorial
