Cómo instalar y usar Trix Editor en Laravel

Last updated Oct 17, 2021

Contenido

Instalación de Trix Editor

Para comenzar con Trix, primero debe incluir su archivo JS y CSS. Puede encontrar estos archivos en su página de GitHub en el directorio dist. Descarga 2 archivos trix.jsy trix.csslos requerirá pronto.

Como necesitamos incluir activos, cree una carpeta ‘js’ y ‘css’ dentro del directorio público de su proyecto Laravel. Coloque los archivos JS y CSS copiados en los directorios respectivos.

La carga de imágenes en el servidor usando Trix requiere que agregue código JavaScript. Así que cree un attachments.jsarchivo y guárdelo en la public/jscarpeta. Agregaremos código a este archivo en la parte posterior del tutorial.

Agregue el siguiente HTML en el archivo blade que mostrará el editor Trix.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('/css/trix.css') }}">
</head>
<body>
    <form method="post" action={{ url('ROUTE_HERE') }}>
        {{ csrf_field() }}
        <p>
            <input id="x" type="hidden" name="content" value="" />
            <trix-editor input="x"></trix-editor>
        </p>
        <input type="submit" name="submit" value="Submit" />
    </form>
     
    <script src="{{ asset('js/trix.js') }}"></script>
    <script src="{{ asset('js/attachments.js') }}"></script>
</body>
</html>

El HTML anterior mostrará las Trix en su página web como se muestra en la captura de pantalla a continuación.

Observe, colocamos el editor Trix en HTML usando la trix-editoretiqueta. El campo oculto con el nombre ‘contenido’ se usa para obtener o mostrar contenido en Trix Editor. Cuando escribimos algo dentro de Trix, el mismo contenido se establece en este campo oculto. En el lado del servidor, obtendremos el contenido del editor de Trix usando la siguiente declaración.

echo $request->input('content');

De la misma manera, si desea mostrar contenido precargado en Trix, establezca el valor en el campo oculto de la siguiente manera.

<input id="x" type="hidden" name="content" value="<h1>This is content</h1>" />

Cargar imagen en Trix Editor

Si desea utilizar imágenes en el contenido, por supuesto, debe cargar la imagen en el servidor. El editor Trix proporciona un evento trix-attachment-addmediante el cual cargaremos la imagen a través de Ajax. Definamos una ruta para ello.

Route::post('upload', 'ProductController@upload');

Ajuste el nombre del controlador en la ruta. En el método de carga de Controller, escriba el código de la siguiente manera.

public function upload(Request $request)
{
    if($request->hasFile('file')) {
        //get filename with extension
        $filenamewithextension = $request->file('file')->getClientOriginalName();
  
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
  
        //get file extension
        $extension = $request->file('file')->getClientOriginalExtension();
  
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
  
        //Upload File
        $request->file('file')->storeAs('public/uploads', $filenametostore);
  
        // you can save image path below in database
        $path = asset('storage/uploads/'.$filenametostore);
 
        echo $path;
        exit;
    }
}

Aquí, estoy almacenando imágenes en la public/uploadscarpeta. Es posible que deba crear un enlace simbólico a la carpeta de almacenamiento con el comando:

php artisan storage:link

Hemos creado un attachments.jsarchivo que se utilizará para realizar una llamada Ajax en el evento trix-attachment-add. Agregue el siguiente código en el attachments.jsarchivo.

(function() {
    var HOST = "http://localhost:8000/upload"; //pass the route
  
    addEventListener("trix-attachment-add", function(event) {
        if (event.attachment.file) {
            uploadFileAttachment(event.attachment)
        }
    })
  
    function uploadFileAttachment(attachment) {
        uploadFile(attachment.file, setProgress, setAttributes)
  
        function setProgress(progress) {
            attachment.setUploadProgress(progress)
        }
  
        function setAttributes(attributes) {
            attachment.setAttributes(attributes)
        }
    }
  
    function uploadFile(file, progressCallback, successCallback) {
        var formData = createFormData(file);
        var xhr = new XMLHttpRequest();
         
        xhr.open("POST", HOST, true);
        xhr.setRequestHeader( 'X-CSRF-TOKEN', getMeta( 'csrf-token') );
  
        xhr.upload.addEventListener("progress", function(event) {
            var progress = event.loaded / event.total * 100
            progressCallback(progress)
        })
  
        xhr.addEventListener("load", function(event) {
            var attributes = {
                url: xhr.responseText,
                href: xhr.responseText + "?content-disposition=attachment"
            }
            successCallback(attributes)
        })
  
        xhr.send(formData)
    }
  
    function createFormData(file) {
        var data = new FormData()
        data.append("Content-Type", file.type)
        data.append("file", file)
        return data
    }
 
    function getMeta(metaName) {
        const metas = document.getElementsByTagName('meta');
       
        for (let i = 0; i < metas.length; i++) {
          if (metas[i].getAttribute('name') === metaName) {
            return metas[i].getAttribute('content');
          }
        }
       
        return '';
      }
})();

En el código anterior, debe pasar la ruta a la HOSTvariable. Laravel requiere un token CSRF en cada solicitud. Obtenemos este token CSRF de la metaetiqueta HTML que agregamos en el archivo blade. Cuando agrega la imagen en Trix, realiza una llamada Ajax, carga la imagen en el servidor y devuelve la ruta de la imagen cargada.

Espero que entiendas cómo instalar y usar el editor Trix en Laravel. Comparta sus pensamientos y sugerencias en la sección de comentarios a continuación.

Cómo instalar y usar Trix Editor en Laravel

Instalación de Trix Editor

Cargar imagen en Trix Editor

Artículos relacionados