Como cargar/subir imágenes con TinyMCE

12
6586

Bien parece mucho tiempo que no posteo, el trabajo seglar me privan de este gusto. Pero ya que encontré un tiempito, y además con el fin de contestar uno de los tantos correos y comentarios de los fieles visitantes, me anime a postear acerca de cómo subir/cargar imagenes con la ayuda de TinyMCE.

Seguramente conocen TinyMCE, el editor web WYSIWYG por excelencia, muy usado en WordPress para su contenido back-end. Este editor esta disponible para descarga gratuitamente. Algunos componentes adicionales como un administrador de imágenes y archivos tienen un costo monetario. Ahora con la ayuda de WordPress y otros CMS quizas no tengamos que pasar por el proceso de instalar y configurar TinyMCE. Sin embargo si, como yo, surge un proyecto web en el que el usuario nos pide que su aplicacion web contenga un editor de contenidos, entonces podemos hacer uso de TinyMCE. La configuración para su funcionamiento es fácil y sencilla.

Pero ahora vamos al grano. TinyMCE tiene la opción de hacer uso de plugins para darle potencia al editor. Por defecto TinyMCE no trae una opción para subir imágenes al servidor. Solo nos muestra una botón que llama una ventana para incluir imagenes en el contenido especificando su URL. Pero queremos el adicional de subirla. Veamos:

¿Qué debemos hacer?

Vamos por pasos y asi no nos perderemos. Asumimos que ya tienes el TinyMCE configurado en tu servidor:

  1. Descargar el plugin PHP Image Upload.
  2. Descomprime y el directorio phpimage copia y pega en el directorio plugins de tiny_mce (donde esté instalado)
  3. Dentro de phpimage ve a config.php y edita los siguiente:
    //Comenta esta lineas
    //$_cur_dir = getcwd(); if ($_cur_dir == FALSE) { $_cur_dir = dirname($_SERVER['SCRIPT_FILENAME']); }
    //$_cur_dir = $_cur_dir.'/../../../..';

    //Y copia y pega la de abajo
    $_cur_dir = $_SERVER['DOCUMENT_ROOT'];

    //Por defecto el directorio donde irán a parar las imágenes es raiz/uploads/images.
  4. Ahora ve al archivo index.php (u otro similar) donde está la configuración para referenciar a TinyMCE.
    En la línea opción relative_urls:false, configuramos para que la URL de la imagen sea de formato /upload/images/imagen1.jpg y no de esta otra forma ../upload/images/imagen1.jpg. Así no tendremos problemas desde donde se llame a la imagen.
    En la línea theme_advanced_buttons1, donde especificamos que botones aparecen en el editor cambiamos image por phpimage, para mostrar la ventana del Subir Imagen.

    <script type="text/javascript" src="tiny_mce/tiny_mce/tiny_mce.js"></script>
    <script language="javascript" type="text/javascript">
    tinyMCE.init({
    relative_urls: false,
    mode : "textareas",
    plugins : "phpimage",
    theme : "advanced",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    theme_advanced_resize_horizontal : false,
    theme_advanced_buttons1 : "bold,italic,strikethrough,separator,styleselect,formatselect,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,phpimage,separator,code",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    content_css : "tiny_mce/estilo_editor.css",
    });
    </script>
  5. Finalmente cuando carguemos nuestro editor y le demos clic en el botón imagen veremos esta ventana. Listo para cargar e insertar nuestras imagenes.
    phpimage

Espero le sirva la información.

12 COMENTARIOS

  1. Muy bueno. Yo tambien tengo la misma duda que “diseño web valencia”, como se podrían eliminar esas imagenes? yo en mi caso, tengo el editor en un formulario, donde guardo ese registro en la base de datos. Para eliminar ese registro hago un SELECT a ese id y asi elimino los datos, pero claro, no tengo manera de identificar la imagen, dado que no se guarda en la Base de datos.

    Habría alguna manera de hacerlo?

  2. buenas por favor ayudemen a colocar el browser en mi form por que ya intente todos los medios y no me funciona, hago lo que me pides pero aun asi no me sale.
    Tambien probe con el ibrowser y tampoco
    no sé qué será.
    Pero ya estoy arto de estar pruebe y pruebe
    Por favor ayudemen

  3. Hola. Segui los pasos que indicas, pero cuando le doy al boton upload, ya teniendo la imagen seleccionada me sale el error: “Please choose an image before loading.”
    Alguien tuvo este problema?

    Saludos

  4. Hola.

    Cuando cambio “image” por “phpimage” no me sale nada, se queda en blanco. Me he bajado el phpimage lo he descomprimido y he seguido todos los pasos.
    ¿qué puede ser?
    Muchas gracias

  5. Resulta que seguí los pasos indicados en este tutorial, y lo único que conseguía era que TinyMCE dejara de funcionar.
    Después de buscar y rebuscar por internet encontré la solución (en inglés como siempre).
    Los pasos que yo he seguido son:

    Descargar phpimage y meter la carpeta en (/plugins) de mi tinymce.

    En el tinymce.init:
    añado el plugin a la lista:
    plugins: “phpimage”,
    añado el botón a la lista de botones:
    theme_advanced_buttons1 : “bold,…..,phpimage”,

    Ahora es cuando me dejaba todo de funcionar.
    El error se debe a que no encuentra el archivo de lenguaje.
    Si miro en el config.php de phpimage, veo la línea siguiente:
    $language = ‘en_EN’;

    Si miro en la carpeta /lang del plugin phpimage veo un archivo en_dlg.js (o algo parecido).

    Renombro el archivo en_dlg.js a en.js

    Ahora acabo de probar otra vez mi web y consigo ver los TinyMCE, además está el botón de phpimage y funciona correctamente.

    Intento subir una imágen pero en preview no me aparece.

    Investigo un poco y la carpeta upload/images (o la que hayais configurado) aparece dentro de la carpeta de tinymce, cosa que no queremos.

    Para solucionar esto, voy a config.php y hago lo que se explica arriba, comendo las dos líneas de $cur_dir y las cambio por esta:
    $_cur_dir = $_SERVER[‘DOCUMENT_ROOT’];
    Además, añado en mi TinyMCE.init lo siguiente:
    relative_urls:false,

    Ahora recargo mi página, intento subir una foto y la veo correctamente en preview.
    Intento insertarla y se inserta correctamente.

    Investigo y veo que la carpeta se me ha creado en el document root( si tenemos un xampp en htdocs), cosa que tampoco quiero ya que en el document root tengo varias webs y quiero que mi carpeta /uploads/images esté dentro de Document root/Miweb/.

    Para ello voy al config.php y configuro la línea anterior.

    $_cur_dir = $_SERVER[‘DOCUMENT_ROOT’].”/MiWeb/”;

    y las dos siguientes las modificamos quitándoles la / del principio. (En mi caso, en vez de /uploads/images, tengo Subidas).
    $server_image_directory = $_cur_dir.’Subidas’;

    $url_image_directory = ‘Subidas’;

    Ahora tenemos nuestra carpeta de subidas en Document Root/MiWeb/Subidas, el TinYMCE funcionando de lujo y phpimage insertando imágenes :D. Espero que os sirva.

  6. Estimada Beatriz,

    Con el TinyMCE no puedes insertar directamente el registro en la base de datos, a lo más subes la imagen a la carpeta uploads u otra que hayas configurado.

    Asíes que, en tu formulario para publicar noticias, por ejemplo, debes tener el campo necesario para buscar, seleccionar, subir e insertar el registro correctamente. Pero bueno, supongo que eso lo sabes.

    Por cierto, seguí los pasos y no pasa nada, o sea, me sale el botón y toda la vaia, pero cuando selecciono una foto, no se ve en el preview y por consiguiente, tampoco la sube a la carpeta uploads.

    ¿Alguna sugerencia?

    Esteban, necesitas ser más específico a la hora de solicitar ayuda. Creo que sería bueno que publicaras acá cómo estás configurado la página php mediante la cual publicas noticias o lo que sea.

    Saludos!

Comments are closed.