Howto: Codeigniter 2.0 + Ckeditor 3.6 + Kcfinder 2.21

CLICA AQUI PARA IR AL MANUAL ACTUALIZADO PARA CodeIgniter 2.1 + Ckeditor 3.6.1 + kcfinder 2.51

Os presento la forma más cómoda de tener un editor WYSIWYG con capacidad para subir ficheros e imágenes al server, integrado en el Framework PHP CodeIgniter! La alternativa a la librería multimedia CKFinder (que es de pago), es KCFinder, y como no he encontrado en ningún sitio una guía explícita sobre como hacerlo os lo explico en este HowTo.

CodeIgniter
CKEditor
KCFinder

Asumiendo que tenemos CodeIgniter y los ficheros descargados…

  1. Descomprimir CKEditor en el directorio raiz del proyecto: xampp\htdocs\codeigniter\ckeditor
  2. Descomprimir KCFinder dentro del directorio de CKEditor: xampp\htdocs\codeigniter\ckeditor\kcfinder
  3. Copiar fichero ckeditor\ckeditor_php5.phpcodeigniter\application\libraries\ckeditor.php
  4. Editamos el fichero que acabamos de copiar:

    ckeditor.php

    /* al inicio del archivo */
    if (!defined('BASEPATH')) exit('No direct script access allowed');
    function __construct($array) {
    $this->InstanceName    = $array['instanceName'] ;
    $this->basePath        = $array['basePath'] ;
    $this->returnOutput        = $array['outPut'] ;
    echo $this->basePath ;
    }
  5. Luego modificamos la función private function ckeditorPath() del mismo archivo de la siguiente forma:

    ckeditor.php

    /**
    * Return path to ckeditor.js.
    */

    private function ckeditorPath()
    {
    if (!empty($this->basePath)) {
    return $this->basePath["basePath"];
    }
  6. En nuestro login y logout tendremos que configurar KCFinder:

    Login controller

    /**
    * Login
    */

    $_SESSION['KCFINDER'] = array();
    $_SESSION['KCFINDER']['disabled'] = false;

    /**
    * Logout
    */

    $_SESSION['KCFINDER']['disabled'] = true;
  7. Ahora podemos crearnos un controlador para probar un formulario (esto es una variante de un controlador que encontré para ckfinder, gracias a quien fuera XD), por ejemplo application\controllers\Form.php:

    form controller

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

    class Form extends CI_Controller {      
       
    function index()     {    
         
    $this->load->library('ckeditor',array('instanceName' => 'CKEDITOR1','basePath' => base_url()."ckeditor/", 'outPut' => true));

    // declaracion de arreglo
    $config = array();

    // indicamos la ruta para ckFinder
    $config['filebrowserBrowseUrl'] = base_url()."ckeditor/kcfinder/browse.php";

    // indicamos la ruta para el boton de la toolbar para subir imagenes
    $config['filebrowserImageBrowseUrl'] = base_url()."ckeditor/kcfinder/browse.php?type=images";

    // indicamos la ruta para subir archivos desde la pestaña de la toolbar (Quick Upload)
    $config['filebrowserUploadUrl'] = base_url()."ckeditor/kcfinder/upload.php?type=files";

    // indicamos la ruta para subir imagenesdesde la pestaña de la toolbar (Quick Upload)
    $config['filebrowserImageUploadUrl'] = base_url()."ckeditor/kcfinder/upload.php?type=images";

    $config['toolbar'] = array(
    array( 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike' ),
    array( 'Image', 'Link', 'Unlink', 'Anchor' )
    );

    // cargamos al arreglo que será enviado a la vista con el textarea ya convertido a editor de texto :D
    $data['fck1'] = $this->ckeditor->editor("mi-textarea", "Valor inicial.",$config);

    // vista
    $this->load->view('form_view',$data);
         }
    }
    ?>
  8. Creamos una vista vacía para hacer solo la prueba… views/form_view.php
  9. Y el resultado: 
  10. Por último recordar que podemos usar KCFinder como biblioteca accediendo desde la propia raiz codeigniter/ckeditor/kcfinder/browse.php

Cualquier duda comentad :–D

****½4votes
23 Comentarios »  | Categorías:  howto, PHP Tags: , , ,

23 Responses to Howto: Codeigniter 2.0 + Ckeditor 3.6 + Kcfinder 2.21

  1. alberto says:

    Muy buena explicación, pero tengo un problema, cuando intento explorar el servidor o subir una imagen me da un error diciendo que no tengo permisos…

    • hektor says:

      Hola… acuérdate que tienes que iniciar la sesion con php con las variables que kcfinder está esperando o no te dejará subir contenido ni explorar desde el gestor:

      $_SESSION[‘KCFINDER’] = array();
      $_SESSION[‘KCFINDER’][‘disabled’] = false;

  2. Edel says:

    Hola: Estoy intentando poner ckeditor en mi sitio hecho con codeigniter. Seguí este tutorial pero en la vista solo sale el textarea sin el editor.
    ¿Alguien puede ayudarme a resolverlo?

    Muchas gracias.

  3. Edel says:

    Hola: He visto que se debe a que estoy usando la versión de codeigniter 2.1.0 en lugar de la 2.0.0. ¿Alguien sabe qué hay que cambiar para que funcione en la 2.1.0?

    Gracias.

    Edel

    • hektor says:

      La verdad no tengo ni idea, yo en su día acabé utilizando la 2.0 para que me funcionara todo. Si encuentras la respuesta sería interesante que nos lo explicaras.
      Mucha suerte :)

  4. Edel says:

    Hola por tercera vez. Ya lo resolví y aunque era muy simple y quizá los demás se den cuenta solos pongo la solución. No era un problema de versión sino que tengo puesto el archivo .htaccess para eliminar el index.php de la url y me había faltado incluir la carpeta ckeditor en la parte de rewriteCond.
    Debe quedar así:
    RewriteEngine on
    RewriteCond $1 !^(index\.php|css|js|images|ckeditor|robots\.txt)
    RewriteRule ^(.*)$ index.php/$1 [L]

    Gracias Hektor que te ofreciste a ayudarme.

    Saludos.

    Elisa

  5. Shadito says:

    Hola, muy buen articulo, pero tengo un problema, desde el controlador mandamos la vista

    // cargamos al arreglo que será enviado a la vista con el textarea ya convertido a editor de texto 😀
    $data[‘fck1’] = $this->ckeditor->editor(“mi-textarea”, “Valor inicial.”,$config);

    Pero por ejemplo si quieres aterrizar ese textarea en una parte especifica del formulario como lo haces?

    • hektor says:

      Hola, bueno eso lo que hace es indicar el textarea que será transformado a ckeditor, normalmente lo indicas con la propiedad clave name: , es eso lo que preguntabas? Disculpa es que no te entendí muy bien.

      • Shadito says:

        ehh no.. por ejemplo digamos que queremos modificar el form y meter algo de estilos o quizas una tabla

        yo logre imprimirlo de la siguiente manera en la vista: ckeditor->editor(“mi-textarea”, ” “);?>
        el problema es que no esta pasando variables del $config y imprime todas las funciones pues en la vista al poner ckeditor->editor(“mi-textarea”, ” “,$config;?> menciona que no esta definido el $config.

        Como podriamos pasar los valores del $config a la vista? para darle un poco mas de estilo. Espero haberme dado a entender mi español no es muy bueno

        • hektor says:

          En vez de hacerlo en el modelo crea la config en la vista:
          $config = array();

          Para dar estilos al formulario le pasas la direccion del enlace CSS:
          $config[‘css’] = ‘/path/mystyles.css’;

          Si quieres añadirles botones custom los defines en toolbar:
          $config[‘toolbar’] = array(
          array( ‘Source’, ‘-’, ‘Bold’, ‘Italic’, ‘Underline’, ‘Strike’ ),
          array( ‘Image’, ‘Link’, ‘Unlink’, ‘Anchor’ )
          );

          Puedes echar un ojo a la docu de la librería:
          http://codeigniter.com/wiki/CKEditor

          Un saludo.

  6. Luis A says:

    Hola, al poner :
    function __construct($array)
    Me arroja el error
    A PHP Error was encountered

    Severity: Warning

    Message: Missing argument 1 for CKEditor::__construct(), called in /home/lasr/public_html/system/core/Loader.php on line 1099 and defined

    Filename: libraries/ckeditor.php

    Line Number: 97

    Si a $array le asigno null o vacio…no se ve la barra..
    Se debe declarar en otra parte ???
    Gracias !!!

  7. Luis A says:

    Hola…lo corregi..Cargaba la libreria en el autoload..
    Ahora…solo me aparece el echo de :
    echo $this->basePath ;
    }

    Slds

  8. Luis A says:

    Hola…sin animo de hacer flood….
    ahora me aparece el cuado de : Valor inicial.
    Pero…no las barras..
    Aplique el .htacces arriba mencionado…pero nada…alguna idea ??
    uso CI 2.1.0
    Slds

  9. Pingback: hcosta.info » Howto: CodeIgniter 2.1 + Ckeditor 3.6.1 + kcfinder 2.51

  10. Luis A. says:

    Wowww…voy y te cuento
    Gracias !!!

  11. war1832 says:

    La verdad que me sirvió mucho tu este tuto. muchas gracias 😉

Leave a Reply

Your email address will not be published. Required fields are marked *