✅ Notizie, temi, plugin WEB e WordPress. Qui condividiamo suggerimenti e le migliori soluzioni per siti web.

Come installare e utilizzare l’editor Trix in Laravel

26

Durante la gestione di un sito Web, abbiamo sempre bisogno di un editor di testo RTF (WYSIWYG). Se vuoi aggiungere contenuti descrittivi che contengano HTML, l’editor WYSIWYG è l’unica scelta. Non puoi aggiungere questo tipo di contenuto nella textarea. Esistono diversi editor di testo RTF come TinyMCE, CKEditor sono disponibili su Internet. Trix Editor è uno di questi. Come sviluppatore, devi aver sentito parlare di Basecamp. L’editor Trix viene utilizzato in Basecamp per la gestione dei contenuti. Questo è abbastanza da dire sulla popolarità dell’editor Trix.

In questo articolo, studiamo come installare e utilizzare l’editor Trix in Laravel. Vedremo anche come caricare le immagini nell’editor Trix.

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.

articoli Correlati

Fonte di registrazione: artisansweb.net

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More