Come installare e utilizzare l’editor Trix in Laravel

Last updated Ott 18, 2021

Contenuto

Installazione dell’editor Trix

Per iniziare con Trix, devi prima includere il loro file JS e CSS. Puoi trovare questi file nella loro pagina GitHub nella directory dist. Scarica 2 file trix.jse trix.cssche richiederanno presto.

Poiché dobbiamo includere risorse, crea una cartella "js" e "css" all’interno della directory pubblica del tuo progetto Laravel. Posiziona i file JS e CSS copiati nelle rispettive directory.

Il caricamento di immagini sul server utilizzando Trix richiede l’aggiunta di codice JavaScript. Quindi crea un attachments.jsfile e tienilo nella public/jscartella. Aggiungeremo codice a questo file nella parte successiva del tutorial.

Aggiungi il seguente HTML nel file blade che visualizzerà l’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>

L’HTML sopra mostrerà il Trix sulla tua pagina web come mostrato nello screenshot qui sotto.

Nota, posizioniamo l’editor Trix in HTML usando il trix-editortag. Il campo nascosto con il nome ‘contenuto’ viene utilizzato per ottenere o mostrare contenuto in Trix Editor. Quando digitiamo qualcosa all’interno di Trix, lo stesso contenuto viene impostato su questo campo nascosto. Sul lato server, otterremo il contenuto dell’editor Trix utilizzando la seguente istruzione.

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

Allo stesso modo, se desideri visualizzare il contenuto precompilato in Trix, imposta il valore sul campo nascosto come segue.

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

Carica immagine nell’editor Trix

Se vuoi utilizzare le immagini nel contenuto, ovviamente devi caricare l’immagine sul server. L’editor Trix fornisce un evento trix-attachment-addtramite il quale caricheremo l’immagine tramite Ajax. Definiamo un percorso per esso.

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

Regola il nome del controller nel percorso. Nel metodo di caricamento del Controller scrivere il codice come segue.

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;
    }
}

Qui sto memorizzando le immagini nella public/uploadscartella. Potrebbe essere necessario creare un collegamento simbolico alla cartella di archiviazione utilizzando il comando:

php artisan storage:link

Abbiamo creato un attachments.jsfile che verrà utilizzato per effettuare una chiamata Ajax sull’evento trix-attachment-add. Aggiungi il codice qui sotto nel attachments.jsfile.

(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 '';
      }
})();

Nel codice sopra, dovresti passare il percorso a HOSTvariabile. Laravel richiede un token CSRF in ogni richiesta. Otteniamo questo token CSRF dal meta tag HTML che abbiamo aggiunto nel file blade. Quando aggiungi l’immagine in Trix, esegue una chiamata Ajax, carica l’immagine sul server e restituisce il percorso dell’immagine caricata.

Spero che tu capisca come installare e utilizzare l’editor Trix in Laravel. Per favore condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.

Come installare e utilizzare l’editor Trix in Laravel

Installazione dell’editor Trix

Carica immagine nell’editor Trix

articoli Correlati