Integrar CKEditor y CKFinder

Pasos para integrar el editor CKEditor y el gestor de archivos CKFinder.

1 – Descargar los componentes.

http://ckeditor.com/download

http://ckfinder.com/download

2 – Descomprimirlos en un directorio del proyecto, por ejemplo en el directorio /js

3 – Añadir al head los scripts, se parte de un archivo al mismo nivel que el directorio js. En ese archivo hay también el formulario con el textarea.

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

<textarea class="ckeditor" name="art_texto" cols="79" rows="15">
</textarea>

ckscript.js es el archivo javascript que servirá para establecer parametros de configuración del editor CKEditor(opcionalmente) y para integrar CKFinder con CKEditor.

En el textarea se añade un class=”ckeditor” para que el editor aparezca, el valor del name nos servirá para crear una instancia y relacionar ckeditor con ckfinder, esa instancia también puede servir para configurar parámetros del editor.

4 – Crear archivo ckscript.js y añadir lo siguiente:

se usa JQuery para asegurarse que el DOM se ha cargado.

$(document).ready(function(){
    var editor = CKEDITOR.replace('art_texto');
    CKFinder.setupCKEditor( editor, 'js/ckfinder/' ) ;
})

Primero se crea una instancia del editor y se guarda en una variable, en la siguiente instrucción se configura el CKFinder para enlazarlo con el editor. Para ello se indica la variable con la instancia en el primer parámetro y en el segundo parámetro la ruta del directorio ckfinder. (la ruta se parte del archivo donde se incluye el ckscript.js, el que tiene el head con el textarea)

5 – En el archivo config.php dentro del directorio ckfinder editar:

function CheckAuthentication()
{

	return true;
}

Establecer a true si esta en none.

$baseUrl = '/dir/js/ckfinder/userfiles/';

Indicar la ruta partiendo de la raíz del servidor hasta el directorio donde se desee que se guarden las imágenes. En este caso se ha indicado el directorio userfiles dentro de ckfinder pero podría ser otro distinto. Asegurarse que el directorio tiene permisos de escritura.