Enviado por christian.pernillo el Mar, 02/04/2019 - 11:38

Qué es Summernote?

Summernote es una librería que otorga un editor parecido a CKeditor (https://ckeditor.com/) pero con un API mucho mas flexible y opensource.

Referencias: (https://summernote.org/)

Qué problema se enfrenta con Summernote?

En un sitio de producción, summernote cuando se inserta una imágen en el editor, este la transforma en base64, esto para un sitio que no esta en producción y no es muy grande puede funcionar, pero, cuando se trata de un sitio en producción y con mucho código html renderizado, al imprimir esta imagen en base64 el navegador va a empezar a interpretar de manera incorrecta el HTML y esta imagen no se va a poder visualizar, a parte de arruinar el HTML de la página donde este siendo renderizada.

Este post intenta solucionar el problema con 2 códigos, uno en Javascript (el que sustituye los callbacks e inicializa el editor del lado del cliente) y un PHP (que sube el archivo enviado por el cliente a el servidor)

// Inicializa el editor
 $('.summernote').summernote({
        minHeight: 200,
        lang: 'es-ES',
        callbacks: {
            // Este callback, sustituye las imagenes en base64
            onImageUpload: function (files) {
                url = 'index?q=upload_summernote_image';
                sendFile(files[0], url, $(this));
            }
        }
    });
 
    // Funcion que hace un ajax a un php para subir el archivo al servidor
    function sendFile(file, url, editor) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            data: data,
            type: "POST",
            url: url,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data_url) {
                console.log(data_url);
                editor.summernote('insertImage', data_url);
            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }
<?php
// Archivo php que sube el archivo al servidor
if ($_FILES['file']['name']) {
    if (!$_FILES['file']['error']) {
        $name = md5(rand(100, 200));
        $ext = explode('.', $_FILES['file']['name']);
        $filename = $name . '.' . $ext[1];
        $destination = 'files/recursos/' . $filename;
        $location = $_FILES["file"]["tmp_name"];
        $moved = move_uploaded_file($location, $destination);
        if ($moved) {
            echo $GLOBALS['host'] . '/files/recursos/' . $filename;
        } else {
            echo "Not uploaded because of error #" . $_FILES["file"]["error"];
        }
    } else {
        echo $message = 'Ooops!  Your upload triggered the following error:  ' . $_FILES['file']['error'];
    }
 
}