Inicio Desarrollo Web Como cargar/subir imágenes con TinyMCE

Como cargar/subir imágenes con TinyMCE

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.

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....