diciembre 3, 2009 39

Tutorial de CKEditor. Parte III.

By in JavaScript, Librerías

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

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

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

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.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,

39 Responses to “Tutorial de CKEditor. Parte III.”

  1. Fernando dice:

    He llegado a este tutorial buscando información sobre este editor y quiero dejarte mi consulta por si puedes darme algo de ayuda.Primero quiero decirte que aunque no he probado lo de subir imagenes me prece muy bueno lo que explicas en este tutorial, estoy seguro que me sera de utilidad.Tengo instalado CKEditor en oscommerce y me ocurre lo siguiente:Cuando doy de alta o edito algun artículo de mi tienda, CKEditor cambia los caracteres especiales por código html, transformando jazmín en jazm&iacute;n.Esto hace que cuando entro en mi tienda y busco con la palabra jázmin no obtenga ningun resultado, mientras que si escribo jazm&iacute;n, sí que me aparece este artículo.Tambien afecta a los meta tags de las descripciones y no tengo claro si esto me perjudica en las busquedas en google.¿Sería posible cambiar este editor para que no modifique los caracteres especiales?Gracias y disculpa por salirme un poco del tema que has planteado en el tutorial.Fernando.

  2. javier dice:

    Oye amigo disculpame pero la verdad no entiendo como hacer todo el proceso donde tengo que pegar el fragmento de codigo o tengo que crear un nuevo script o espesificamente donde tengo que hacer cada cosa porque la verdad no se nada de javascript pero quiero implementar este finder, e buscado informacion atraves de internet pero no encuentro casi nada, en alguna pagina encontre un procedimiento y yo creia que habia funcionado pero cuando le pongo subir imagen, me muestra “el tipo de recurso no es valido” la verdad ahora ya no se que hacer si implementarlo o mejor dejarlo así, y pues esta muy chido, espero me ayudas. Saludos

  3. Fernando, quizá una posible solución es que al hacer las busquedas cuando se introduzca “jazmín” este se convierta en “jazm&iacute;n” a la hora de buscar. No se si me explico bien. De esta forma las entidades HTML quedan como tales en base de datos, que desde mi punto de visto sería más correcto.

    Perdona que haya tardado tanto en contestar, pero entre las vacaciones y unos pequeños problemas que he tenido después no he podido atender el blog como me gustaría.

  4. javier, el problema puede ser de la configuración del CKFinder. La configuración de este está en el archivo config.php dentro de la carpeta CKFinder.

    Perdona que haya tardado tanto en contestar,
    pero entre las vacaciones y unos pequeños problemas que he tenido
    después no he podido atender el blog como me gustaría.

  5. Pedro Chacón dice:

    Hola Manuel, gracias por tu aporte, me gustaría hacer un aporte y es que cuando intente hacer la integración me ha ocurrido un error javascript, Línea: 381Error: ‘config’ es nulo o no es un objeto, la razón del error es porque no estaba recogiendo la instancia de editor, tu código esta: CKEDITOR.replace(‘editor’);CKFinder.SetupCKEditor( editor, ‘/ckfinder/’ );así debe quedar:var editor = CKEDITOR.replace(‘editor’);CKFinder.SetupCKEditor( editor, ‘/ckfinder/’ );y listo me ha funcionado. Gracias por tu aporte, me ha acercado mucho a esta actualización.

  6. Muchas gracias Pedro, tienes toda la razón, ya lo he corregido.

  7. Sonia R. dice:

    Gracias Manuel por compartir con nosotros tus conocimientos, de una forma tan clara.Tengo un problema, he seguido tus pasos pero cuando doy al botón de \ver servidor\ me salta el siguiente error: Error HTTP 404 – Not Found. ¿Sabes a que puede deberse? Te agradecería que me echaras un cable, estoy buscando información y no encuentro nada.Muchas gracias

  8. Sonia R. dice:

    Se me olvidaba, el desarrollo lo estoy haciendo con asp.net.

  9. Pues de asp.net no tengo mucha idea, pero he estado echandole un ojo al archivo config.ascx. Aproximadamente en la linea 26 hay una función que se llama SetConfig. En esa función hay dos variables, BaseUrl y BaseDir. Posiblemente BaseDir tenga que apuntar al directorio que quieres que se muestre.

    En este enlace viene la documentación de CKFinder para asp.net: CKFinder Quick Start

  10. Sonia R. dice:

    Muchas gracias Manuel, le echaré un ojo a la documentación y las rutas de esas dos variables. Una cosa más. Aún no tengo la licencia de CKFinder, quiero ver que todo funciona y luego comprarla. Supongo que pueda probarlo sin la licencia, no??Un saludo

  11. Lucas dice:

    Hola a todos..Tengo un inconveniente con mi editor que quisa me puedan ayudar a solucionar.Al imprimir un documento utilizando CKEditor, me sale la paginacion en la parte superior izquierda.Como puedo hacer para quitar esta paginacion.Gracias.

  12. aerofly dice:

    Solo te falto decir que para visualizar el resultado de la imagen que pusiste al inicio se tenia que hacer uso de unos componentes de manipulación de imagen para generar los thumbnails de las imagenes en el explorador, bueno solo es una aclaracion más no una crítica, buen aporte gracias me ayudo bastante el tuto sobre todo la configuración de la barra de herramientas que de por si tenia muchas cosas demás para el uso que le estaba dando al editor.Saludos.Aerofly

  13. Manu dice:

    Tengo un problema . Se me abre bien el fcfinder pero no me aparece ningun elemento de la carpeta como puedo solucionar este problema ?? Gracias

  14. Daniel dice:

    Hola a todos.CKFINDER pone una diagonal invertida en los codigos depues de insertar el contenido en la pagina ( ejemplo:  style=\color: #b22222\ )alguien podria ayudarme para saber como quitarsela.Nota : no estoy usando licencia de CKFINDER sera que devo de comprarla, peron en Joomla si funciona bien y por lo que veo tampoco usa licencia.Gracias.

  15. Gilberto dice:

      Buenas tardes  Estoy empezando a utilizar el fckEditor pero necesito quitar la opción de redimensionamiento que tiene (en la parte inferior derecha), esto es porque si el usuario redimensiona el fckeditor mi pagina web se distorsiona. ¿Existe alguna opción para quitar el redimensionamiento?  Gracias

  16. Elena dice:

    HolaGracias por el tutorial, es muy práctico.Pero tengo un problema y es que integro CKFinder en mi CKEditor, pero no me aparece ni el botón \Ver Servidor\ ni la pestaña \Cargar\ en la ventana de imagen. Creo que he añadido correctamente el código en mi página:    <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() {             var editor = CKEDITOR.replace(‘texto’);            CKFinder.SetupCKEditor( editor, ‘../ckfinder/’ );        }    </script>Agradecería la ayuda de alguien. Un saludo

  17. Elena dice:

    Hola
    Gracias por el tutorial, es muy práctico.Pero tengo un problema y es que
    integro CKFinder en mi CKEditor, pero no me aparece ni el botón “Ver
    Servidor” ni la pestaña “Cargar” en la ventana de imagen. Creo que he
    añadido correctamente el código en mi página:
        <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() {
                var editor = CKEDITOR.replace(‘texto’);
                CKFinder.SetupCKEditor( editor, ‘../ckfinder/’ );
            }
        </script>
    Agradecería la ayuda de alguien. Un saludo

  18. Fred dice:

    A mi me funcionó poniendo la ‘s’ de CKFinder.SetupCKEditor en minúscula.

  19. Daniel dice:

    si, es cierto. Al poner la s de SetupCKEditor en minuscula, habilita la opcion de ver servidor!

  20. Hola te tal hice lo siguiente en el directorio principal puse las dos capetas ckeditor y ckfinder así tal como las descargue adentro su estructura plugins todo en orden. Después dentro del directorio principal cree la carpeta admin dentro de ella mi archivo php con lo siguiente:<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(‘contenido_menu’); CKFinder.setupCKEditor(contenido_menu, ‘../ckfinder/’ );}</script>el editor se ve pero no se ve la pestaña cargar y el boton examinaren la carpeta ckfinder/config.php en la función authentification en lugar de false le puse true para tener los permisos pero aun así no se ve no encuentro el problema nubla mi mente espero alguien me pueda ayudar se lo agradezco mucho de antemano.

  21. pep biondi dice:

    no nos sirvio, porque es tan dificil instalar esta bosta?

  22. vlagarca dice:

    muy groso el tuto, tambien Fred es un genio se paso too.!!! gracias saludos

  23. David dice:

    Muchas gracias por la info, ha sido de gran ayuda!!! ;)si necesitas algo puedes contactar conmigo.Un saludo y gracias de nuevo.

  24. KoKoRO dice:

    Gracias por el tutotrial, pero desearía que el editor pesara menos, bueno habrá algunos archivos innecesarios que de deben de borrar.

  25. Sergio dice:

    Estimado Manuel:Tengo un archivo php, donde he puesto el código que mencionas, arreglando lo del var editor, y poniendo la s en minúscula, e puesto el true donde corresponde, este archivo está en el mismo directorio de las carpetas ckeditor y ckfinder, sin embargo, la pestaña cargar y el ver servidor no me salen.Alguna ayuda con esto.Gracias

  26. Andrea dice:

    Hola, muchas gracias por el tuto, pero resulta que me sucede que realizo todos los pasos y no me muestra el boton para ver mis archivos, me puedes explicar o decir que puedo estar realizando mal.Gracias

  27. Cris dice:

    Hola a todos!He instalado Ckeditor como extensión para MEdiawiki. Tengo Ckeditor y Ckfinder en el mismo directorio. He intentado hacer que funcione siguiendo las instrucciones pero nada. Podríais confirmar en qué archivo hay que añadir:<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() {
                var editor = CKEDITOR.replace(‘texto’);
                CKFinder.SetupCKEditor( editor, ‘../ckfinder/’ );
            }
        </script>Mil gracias

  28. Carlos e caicedo dice:

    Como se que están atareados y muy preocupados  esta es la solución. A mí tampoco me salia el botón ni me daba la opción de pestaña de cargar. simplemente es cambiar el siguiente código CKEDITOR.replace( ‘editor1’, { fullPage : true, extraPlugins : ‘docprops’ });y colocar este otrovar editor = CKEDITOR.replace( ‘editor1’ );                    CKFinder.setupCKEditor( editor, ‘/ckfinder/’ );y listo ya aparece el botón y da la opción de cargar

  29. Carlos e caicedo dice:

    Hay que tener en cuenta que hay que seguir los pasos mencionados por nuestro amigo Manuel Jesús Carrasco que muy amablemente nos ha ayudado. el código se cambia en el archivo en el cual deseamos colocar nuestro ckeditor

  30. Matias dice:

    Tengo el mismo problema de varios: no puedo cargar imagenes habiendo hecho todos los pasos tal cual los explicados….

  31. Diskover dice:

    De verdad… no puede ser tan complicado. Apenas hay información en Internet sobre estas cosas y la poca que hay, ponen empeño, pero pecan en explicar mal las cosas, obviando pasos. El resultado final es que ha nadie le sale nada.1º- No me queda claro en donde hay que meter la carpeta CKfinder… ¿dentro de modules/CKeditor? ¿dentro de modules? 2º- El código scrit… ¿en que archivo tengo que pegarlo?Gracias

  32. Livio dice:

    Lo pude intaslar sin problema alguno. gracias por la info.

  33. Stroldj dice:

    HolaA ver si alguién me puede ayudar, se que el post és viejo pero este es el único sitio donde parece qe alguién sabe como manejar el ckfinder.Instalé el ckfinder para integrarlo al ckeditor, en un panel de administrador que se encuentra dentro de un directorio admin. No es ningun sistema o plantilla ya montado, este esta echo por mi en PHP. El ckeditor funciona correctamente y introduzco textos, links etc, sin problemas.He seguido las instrucciones del tutorial y en el editor aparece todo el panel de las imagenes, pero cuando le intento cargar en el servidor, me aparece un mensaje de:Not Found
    The requested document was not found on this server.Lo mismo sucede si le doy a “ver servidor”. porque la ruta que me aparece es http://www.misitio/ckfindrer... y deberia ser http://www.misitio/admin/ckfindrer…he probado modificando el “$baseUrl ” en el “config.php”, y continua comportandose igual ponga lo que ponga.Cree una carpeta en el directorio raiz llamandolo “ckfinder” y dentro he copiado el “ckfinder.html”, esto hace que al darle a ” ver servidor” me abra una pagina totalmente en blanco, pero el resto sigue igual.alguién tiene respuesta a esto??Gracias

  34. Juan dice:

    Hola bueno a mi me funciona la carga de imágenes ahora como hago para que le de enviar? y actualice pues no veo por ninguna parte el botón de enviargracias

  35. Eladerezador dice:

    Hola, tengo una duda, cuando trato de insertar una imagen en el editor me muestra el cuadro de dialogo de ckfinder correctamente, inserto una imagen de mi disco duro, pero no me la copia a las carpeta donde quiero que suba las imágenes, $baseUrl = ‘/ckfinder/userfiles/’; userfiles aparece vacia. ¿Cuál puede ser la razón?Muchas gracias,

  36. Camilo Restrepo dice:

    No tiene sentido algo que no es libre como  CKFinder, 

  37. Camilo Restrepo dice:

    Que precios tan caros para algo que se hace con otras librerías y tecnologías locos para que usan ckfinder ckeditor jajaja esas cosas son un robo que falta de respeto habiendo tantas coas de código abierto$799/USD? mejor dicho están necesitados

  38. carlos dice:

    Hola. He logrado configurar bien ckeditor con ckfinder. He logrado igualmente que aparezca el boton “ver el Servidor” y que éste funcione, pero al envíar la imagen a otra página mediante un formulario; la imagen no se ve porque me sale src= http://www.midominio/%22http://www.midominio/thumbs/i/2014/Images/20140308p.jpg/%22Gracias por vuestra ayuda

  39. carlos dice:

    encontre la solución a la cuestión que planteé antes. Dejo la solución por si le viene bien a alguien.$codigo = stripslashes( $_POST[‘art_texto1’] ) ;  (código correcto que me captura  bien la imagen enviada)echo $codigo;$variable = $_POST[‘art_texto1’]; (código erróne que capturaba mñas la imagen.echo $variable;Espero que sea de ayuda a alguien.

Leave a Reply