CKEDITOR es un excelente editor WYSIWYG , pero tiene una pequeña falencia (no asi su primo FCKEditor) que es el upload de fotos/imagenes desde tu PC al servidor para incrustar en los textos.
Para solucionar esto de manera natural y sin tocar el codigo de CKEDITR, te propongo usar ese plugin muy bueno:
1- Descarga y descomprime el plug-in ckeditor-upload
2- Edita el archivo ckeditor/filemanager/confic.inc.php y sube toda la carpeta en el public_html de tu repositorio
coloca alli la url de tu sitio.
3- en el HTML donde tienes tu textarea, coloca un id=»mitxt»
y debajo agregas este codigo:
4- Para poder utilizar esto debes ir a Insertar Imagenes en el editor, y luego Clic en «Ver Servidor» alli se abre un pop up que nos permite gestionar las imagenes e insertarlas en el texto del editor.
Imágenes:
Buenas,
Antes de nada agradecerle este post, pues justamente es lo que ando buscando.
Tengo un problema, el link que usted puso para descargar el plugin da error.
¿de donde se puede descargar dicho plugin?
Gracias
Hola , migré recientemente mi blog de hosting, ya recuperé los archivos. Por fa, prueba descargar ahora el plugin desde mi post.
Gracias!
Gracias,
Bajado y listo para probar
Hola
Estoy intentando que el Ckeditor me permita subir imágenes desde el servidor, en mi búsqueda encentré este post pero tengo un problema no me deja descargar el plugin, puedes revisar por favor,
Mil gracias
Acabo de probar y se descarga correctamente, es un comprimido.
Buenas tardes amigo. Estoy de malas al subir imagenes desde el servidor. por favor puedes ser mas explicito en tus pasos. sabes que trato de enterder y seguir lo que dices pero no doy. gracias de antemano por ayudar a los que menos sabemos…
Descarga el Plugin e instalalo en tu public_html.
Luego dentro de ese plugin encontrarás un archivo ubicado en ckeditor/filemanager/confic.inc.php
editalo y coloca los datos segun tu servidor.
Por último en el HTML de tu pagina donde tienes el campo textarea colocas (al final de la pagina):
Guarda todo, y al recargar la pagina cuando das al boton insertar imagen , debe abrirte con un botón «Ver Servidor» ahi es donde se activa el plugin.
Hola, buen aporte pero tengo un problema, y es que cuando le doy cargar una imagen aparentemente todo funciona bien, pero el problema es que no me aparece nada en el campo URL, osea no al darle clic en agregar imagen el plugin desaparece y en el campo URL no me aparece la direccion, se supone que debe aparecer, pero el campo queda vacio, no se que esta mal, podrian ayudarme, gracias
Gracias, es justo lo que estaba buscando!
De nada, que bueno q te sirvio
Si tienen el problema de que al dar cargar imagen, la direccion URL se queda en blanco, se debe realizar los siguientes pasos:
buscar el archivo : filemanager/file_details.php
y buscar la siguiente linea:
var o = $(«div.cke_dialog input:first», window.opener.document).val(cual);
que sustituiremos por esta otra:
var o = $(«div.cke_dialog_ui_input_text input:first», window.opener.document).val(cual);
esto lo utilice en la version: ckeditor_3.6.2_1
Saludos.
Hola, yo tengo el mismo problema que SAUL, porque selecciono la imagen pero al insertarla no me aparece ninguna URL, por lo cual no puedo concluir la operación de carga. Aguardo tu respuesta para ver cómo podemos solucionarlo, muchas gracias.
Hola ,
Si tienen el problema de que al dar cargar imagen, la direccion URL se queda en blanco, se debe realizar los siguientes pasos:
buscar el archivo : filemanager/file_details.php
y buscar la siguiente linea:
var o = $(“div.cke_dialog input:first”, window.opener.document).val(cual);
que sustituiremos por esta otra:
var o = $(“div.cke_dialog_ui_input_text input:first”, window.opener.document).val(cual);
esto lo utilice en la version: ckeditor_3.6.2_1
Saludos.
Buen Aporte!! gracias!!
Hola, quisiera hacer una pregunta, localmente esto podría funcionar?
Gracias
Si claro, con un XAMP Server , permisos en directorios, etc etc.
no funciona con crome. y aun tengo problemas para copiar la direccion en el id=mitext copia en el segundo intento o tercero, esta muy bueno tu emplo. podrias chequearlo. gracias por tu aporte!!
excelente y gracias!!!
oye ya le modifique
var o = $(“div.cke_dialog input:first”, window.opener.document).val(cual);
pero no me hace nada se queda el frame para seleccionear la imagen
Gracias!!… me salvaste la vida.
Wow!!! la vida, eso me hace sentir un heroe durante todo el día!!
Cojonudo!
Mil millones de gracias!!
Solo tengo una duda, veo como subir imágenes a un directorio que cuelga del que he configurado como directorio raíz, bajo la opción: «acciones para este dir», pero no veo como subir un fichero en el propio raíz, no consigo ver la misma opción para este directorio…
¿Alguien me puede resolver la duda? ¿Se me está escapando algo?
Hola, excelente post, de verdad me sirve mucho, pero tengo un problema, ya descomprimí el plug-in, lo instalé, cuando pongo insertar imagen veo el botón «Ver Servidor», hasta hí perfecto, pero cuendo se me abre la ventana únicamente veo el listado de archivos del directorio que puse en el config, no veo nada de las opciones de la derecha, no puedo subir imágenes, ni crear directorios ni eliminar el directorio. Me puedes ayudar por favor !! Gracias.
Por favor verifica permisos del directorio de upload de archivos.
estoy probando el local..pero al insertar no me traspasa la url al input de donde se llama al boton servidor, hice alert de las variables cual y me arroja la url completa incluyendo el nombre de la imagen ..pero la variable o me arroja objet y despues de eso se cierra la venta na y en input donde debe aparecer la url queda en blanco. como se resuelve? mi ck editor es la version 4.xx
Otra opción para los que no lo podáis hacer funcionar es crear un repositorio de imágenes que muestre la ruta absoluta a la imagen en el servidor, y pegarla en URL, así lo he hecho hasta ahora, aunque probaré esta opción que parece interesante.
Gracias.
Hola,
Claro, el problema es que el usuario final quizás no tenga los conocimientos necesarios para realizar el upload de las imagenes, y luego enlazarlas.
Esta opción se la hace fácil al usuario final.
Para que traspase la URL al input cambiar en el archivo file_detail.php
var o = $(“div.cke_dialog input:first”, window.opener.document).val(cual);
que sustituiremos por esta otra:
var o = $(“div.cke_dialog_ui_input_text input:first”, window.opener.document).val(cual);
Cambiaremos las comillas (“ ”) por comillas escritas desde el teclado (» «) ,que son las que dan problemas, a mi me funciono.
Pero ahora no veo la previsualizacion de la imagen en el campo «Propiedades de imagen», si me puedes ayudar te lo agradeceria
por favor verifica si la URL a la imagen es correcta?
Genial el script, lo único que tengo algunos problemas.
En primer lugar no me aparece la parte de la derecha, donde se suben imagenes, y crean directorios. Lo he resuelto, de momento, haciendo un include directamente de esa parte.
Una vez consigo que las imagenes se suban al servidort, cuando las selecciono no me aparecen en el cuadro correspondiente. Se queda un mensale de loading…
Y tampoco me aparece el apartado para editar, copiar, pegar,……..
Alguna sugerencia.
Hola, posiblemente tengas algun problema con el path de subida o bien, con los permisos de escritura en el dir de destino.
Chequea eso, y luego vamos descartando.
he mirado las rutas de las imagenes y parece que todo esta bien. He colocado rutas absolutas, relativas, pero nada, no funciona.
Aunque aparece el arbol de la carpeta files, no aparece la parte derecha para subir imagenes.
He colocado el formulario de subida a mano en el index.php y aunque el directorio es el especificado en config.inc.php, la imagen la sube a la carpeta filemanager y no a la files.
En el config tengo las siguientes lineas:
Te dejo un enlace de la captura de pantalla:
http://aulares.com/images/pantalla.png
Muchas gracias por tu atención.
Resuelto !!!!!!!!!!!!!
Te cuento por si sirve de ayuda donde tenia yo el error, porque el script funciona de maravilla y creo que a Raul Chauvin le pasaba algo similar:
Me he puesto a ejecutar los archivos php en la barra de direcciones del navegador y me he dado cuenta que el problema estaba en que daba error cuando añadía la extensión del archivo como parametro a pasar por los php.
resulta que con la neura de no sufrir ataque tipos SQL, XSS, etc, pues tengo un httaccess el cual tenia la sentencia «RewriteRule ^(.*)$ /error.php [NC]» que evita que se pasen como parametros variables que contengan un «punto», como por ejemplo imagen.jpg.
He quitado esa linea y funciona de maravilla.
Tambien he podido detectar que si incluimos imagenes o creamos carpetas con espacios o acentos, después no se puede trabajar con ellos. Así que les he pasado una funcion php para que sustituya estos caracteres y otros extraños para limpiar estos nombres.
Como Elvis, a mi también me has salvado la vida, bueno, al menos me la has mejorado.
Verás, he desarrollado una aplicación para gestionar mi instituto (http://aulares.com , aunque he empezado ahora a escribir las instrucciones de uso y poco a poco la ire competando. De momento en mi centro la tenemos en local y funciona tambien de lujo). Bueno, ahora quería crear un módulo para poder gestionar, crear y almacenar preguntas para hacer los exámenes (con un banco de preguntas, preguntas al azar,….), y necesitaba para el ckeditor una plugin para crear formulas matemñaticas (que lo consegui del ckeditor) y uno para subir imagenes (que no consegui hacer funcionar ninguno de los gratuitos del ckeditor). Así, que tu plugin me va a ayudar mucho para desarrollar este proyecto.
Así que muchas gracias por todoooooooo.
Un saludo
Exceleten, me alegra. Un saludo!
ddicami, muchísimas gracias por tu gran aporte, también funciona con ckeditor v4 y extensiones archivos rar zip 7z y pdf, el único problema que estoy teniendo es que no acepta archivos superiores a 2 megas, si supieras o alguien sabe como se puede aumentar esta capacidad se los agradeceria, no pasa por el servidor ya que lo tengo configurado hasta 128M en upload de archivo y post.
Eso es una restriccion de tu configuracion en php.ini . Si podés acceder y modificarlo, reiniciar apache y listo. Si es un hosting compartido, no podrás hacer nada.
no es eso ddicami, por que los archivos que subo los realiza, por ejemplo si tiene 14mb en rar los sube y aparecen en el menú de la izquierda pero cuando presionas el archivo uplodeado a la derecha no aparece la url, no a si cuando lo haces con un rar menor a 2 megas si aparece, por eso no creo que sea por el hosting , si no con algo que tenga que ver con los códigos js que no me permite la lectura de la información a mostrar, por eso es mi duda.
Comprueba este post, quizás te de la solucion.
http://ckeditor.com/forums/Support/problem-when-uploading-big-files
Hola buen día.
He aplicado como se indica al principio la posibilidad de subir imágenes desde el servidor.
El problema que tengo es cuando hago click en el botón «Ver Servidor».
Me lleva a una ventana donde me dice lo siguiente:
«No se puede encontrar la página web»
y el Error es: HTTP 404
Alguien puede ayudarme a resolver este inconveniente?
Ya prove todo lo que este sitio indica sin poder obtener un resultado favorable.
Muchas gracias.
Un saludos cordial.
Hola sinceramente estoy muy agradecido por este aporte que acabo de encontrar, pero tengo un minúsculo problema.
Al igual que todos no me pasaba la URL al input pero puse este código que recomendaron en los comentarios y me solucionó todo el problema.
var o = $(“div.cke_dialog_ui_input_text input:first”, window.opener.document).val(cual);
Pero ahora el campo de «Previsualización» no me funciona osea no me muestra la imagen, tengo que copiar el la url nuevamente y pegarla para poder previsualizar.