Hur man installerar och använder Trix Editor i Laravel

Senaste uppdateringen okt 17, 2021

Innehåll

När vi hanterar en webbplats behöver vi alltid en rich text editor (WYSIWYG). Om du vill lägga till beskrivande innehåll som innehåller HTML är WYSIWYG-redigeraren det enda valet. Du kan inte lägga till en sådan typ av innehåll i textområdet. Det finns flera textredigerare som TinyMCE, CKEditor finns på Internet. Trix Editor är en av dem. Som utvecklare måste du ha hört talas om Basecamp. Trix-redigeraren används i Basecamp för hantering av innehåll. Detta räcker för att säga om Trix-redaktörens popularitet.

I den här artikeln studerar vi hur man installerar och använder Trix-redigeraren i Laravel. Vi kommer också att se hur man laddar upp bilder i Trix-redigeraren.

Installation av Trix Editor

För att komma igång med Trix måste du först inkludera deras JS- och CSS-fil. Du hittar dessa filer på deras GitHub-sida under dist-katalogen. Ladda ner 2 filer trix.jsoch trix.csssom snart kommer att krävas.

Eftersom vi måste inkludera tillgångar, skapa en ‘js’ och ‘css’ mapp i den offentliga katalogen för ditt Laravel-projekt. Placera de kopierade JS- och CSS-filerna i respektive kataloger.

För att ladda upp bilder på servern med Trix måste du lägga till JavaScript-kod. Så skapa en attachments.jsfil och behåll den under public/jsmappen. Vi lägger till kod i den här filen i den senare delen av självstudien.

Lägg till följande HTML i bladfilen som visar Trix-redigeraren.

<!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>

Ovanstående HTML visar Trix på din webbsida som visas på skärmdumpen nedan.

Observera att vi placerar Trix-redigeraren i HTML med hjälp av trix-editortaggen. Det dolda fältet med namnet "innehåll" används för att hämta eller visa innehåll i Trix Editor. När vi skriver något i Trix, är samma innehåll inställt på det här dolda fältet. På serversidan får vi innehållet i Trix-redigeraren med nedanstående uttalande.

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

På samma sätt, om du vill visa förfylldt innehåll i Trix, ställ in värdet till det dolda fältet enligt följande.

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

Ladda upp bild i Trix Editor

Om du vill använda bilder i innehållet måste du naturligtvis ladda upp bilden på servern. Trix-redigeraren tillhandahåller en händelse trix-attachment-adddär vi laddar upp bilden via Ajax. Låt oss definiera en rutt för den.

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

Justera regulatorns namn i rutten. I kodens uppladdningsmetod skriver du koden enligt följande.

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

Här lagrar jag bilder under public/uploadsmappen. Du kan behöva skapa en symbolisk länk till lagringsmappen med kommandot:

php artisan storage:link

Vi har skapat en attachments.jsfil som kommer att användas för att ringa ett Ajax-samtal på evenemanget trix-attachment-add. Lägg till koden nedan i attachments.jsfilen.

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

I koden ovan ska du skicka rutten till HOSTvariabel. Laravel kräver en CSRF-token i varje begäran. Vi får den här CSRF-token från HTML-metataggen som vi lade till i bladfilen. När du lägger till bilden i Trix ger den ett Ajax-samtal, laddar upp bilden på servern och returnerar sökvägen till den uppladdade bilden.

Jag hoppas att du förstår hur du installerar och använder Trix-redigeraren i Laravel. Dela dina tankar och förslag i kommentarsektionen nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net