Cómo subir imágenes en el editor TinyMCE utilizando PHP

Subir imágenes es una característica muy común en todo editor WYSIWYG que se precie. Si utilizas el editor TinyMCE, puedes insertar imágenes de forma sencilla en el editor. El editor TinyMCE cuenta con una opción para insertar imágenes como tipo BLOB, pero ya sabéis que este tipo de datos tarda en cargarlo el navegador. Por lo tanto, subir archivos en el servidor siempre es buena opción a la hora de insertar imágenes en el editor.

El editor TinyMCE permite la selección de archivos locales y la subida de imágenes. Pero, para que estas características sean funcionales, es necesario que configures el editor. Además, se requiere que el handler de carga archivos suba la imagen al servidor. En este tutorial, te mostraremos qué hacer para que podamos subir imágenes en el editor TinyMCE utilizando PHP.

Con esta característica el usuario podrá subir imágenes desde su equipo para insertarlas en el editor. Además, le proporcionaremos una UI para simplificar la subida de imágenes seleccionándola desde su propio equipo.

Código HTML

Define el elemento HTML (myTextarea) donde vamos a agregar el editor TinyMCE.

<textarea id="myTextarea"></textarea>

Código Javascript

Antes que nada, incluye la librería Javascript del plugin TinyMCE.

<script src="tinymce/tinymce.min.js"></script>

Tendremos que habilitar distintas opciones del editor para habilitar la subida de fichero y la función de poder seleccionar archivos del equipo local en el TinyMCE:

  • images_upload_url: Define la URL donde se alojarán los ficheros que suba el usuario. Una vez que se defina esta configuración, aparecerá una pestaña Upload en el cuadro de diálogo Image.
  • images_upload_handler: Esta opción sobreescribe el handler de subida por defecto para simular una subida exitosa. Esta handler cuenta con tres argumentos: blobInfo, success y failure. Si todo ha ido bien, la función de devolución nos hará llegar con un objeto JSON con la propiedad location.
<script>
tinymce.init({
    selector: '#myTextarea',
    plugins: 'image code',
    toolbar: 'undo redo | image code',
    
    // without images_upload_url set, Upload tab won't show up
    images_upload_url: 'upload.php',
    
    // override default upload handler to simulate successful upload
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;
      
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'upload.php');
      
        xhr.onload = function() {
            var json;
        
            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
        
            json = JSON.parse(xhr.responseText);
        
            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }
        
            success(json.location);
        };
      
        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
      
        xhr.send(formData);
    },
});
</script>

Gestor de subida (upload.php)

El siguiente código crea un handler de subida del lado del servidor para subir imágenes utilizando PHP.

  • Comprueba si el fichero se ha subido vía HTTP POST utilizando la función is_uploaded_file() de PHP
  • Si está definido el origen, se comprueba si es válido.
  • Verifica la extensión del fichero utilizando la función pathinfo() de PHP.
  • Subir el fichero al servidor utilizando la función move_uploaded_file() de PHP.
  • Responder a la subida satisfactoria con JSON.
<?php
// Allowed origins to upload images
$accepted_origins = array("http://localhost", "http://107.161.82.115", "http://programacion.net");

// Images upload path
$imageFolder = "images/";

reset($_FILES);
$temp = current($_FILES);
if(is_uploaded_file($temp['tmp_name'])){
    if(isset($_SERVER['HTTP_ORIGIN'])){
        // Same-origin requests won't set an origin. If the origin is set, it must be valid.
        if(in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)){
            header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        }else{
            header("HTTP/1.1 403 Origin Denied");
            return;
        }
    }
  
    // Sanitize input
    if(preg_match("/([^wsd-_~,;:[]().])|([.]{2,})/", $temp['name'])){
        header("HTTP/1.1 400 Invalid file name.");
        return;
    }
  
    // Verify extension
    if(!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))){
        header("HTTP/1.1 400 Invalid extension.");
        return;
    }
  
    // Accept upload if there was no origin, or if it is an accepted origin
    $filetowrite = $imageFolder . $temp['name'];
    move_uploaded_file($temp['tmp_name'], $filetowrite);
  
    // Respond to the successful upload with JSON.
    echo json_encode(array('location' => $filetowrite));
} else {
    // Notify editor that the upload failed
    header("HTTP/1.1 500 Server Error");
}
?>

 

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP