Subir imágenes con TinyMCE v4

Siempre que tengamos que realizar un gestor de contenidos para algún proyecto aparece la necesidad de incluir un editor de texto como TinyMCE y una de sus principales limitaciones es que no incluye un plugin para subir imágenes. Aquí he incluido el código de uno muy sencillo que preparé hace un tiempo.

imgsurfer

Aspecto visual de imgsurfer

 

Para añadir este plugin a TinyMCE v4 debes seguir estos pasos:

  • copia el directorio “imgsurfer” dentro del directorio de plugins de TinyMCE
  • añade el plugin a la configuración del editor:
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste imgsurfer"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | imgsurfer"
});
  • en el directorio “lib”, dentro del plugin, encontrarás el fichero “config.php”, allí debes editar las rutas de las imágenes
  • es necesario que el directorio donde se guardan las imágenes tenga suficientes permisos para permitir subirlas

El plugin puedes descargarlo desde aquí: plugin de TinyMCE v4 para subir imágenes