Jak zainstalować i używać edytora Trix w Laravel?

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Zarządzając stroną internetową zawsze potrzebujemy bogatego edytora tekstu (WYSIWYG). Jeśli chcesz dodać opisową zawartość zawierającą HTML, jedynym wyborem jest edytor WYSIWYG. Nie możesz dodać tego rodzaju treści do obszaru tekstowego. W Internecie dostępnych jest kilka bogatych edytorów tekstu, takich jak TinyMCE, CKEditor. Jednym z nich jest Trix Editor. Jako programista na pewno słyszałeś o Basecamp. Edytor Trix jest używany w Basecamp do zarządzania treścią. Tyle można powiedzieć o popularności edytora Trix.

W tym artykule dowiemy się, jak zainstalować i używać edytora Trix w Laravel. Zobaczymy również, jak wgrywać obrazy w edytorze Trix.

Instalacja edytora Trix

Aby rozpocząć pracę z Trix, musisz najpierw dołączyć ich plik JS i CSS. Możesz znaleźć te pliki na ich stronie GitHub w katalogu dist. Pobierz 2 pliki trix.jsi trix.cssco wymagać będzie wkrótce.

Ponieważ musimy dołączyć zasoby, utwórz foldery „js" i „css” w publicznym katalogu twojego projektu Laravel. Umieść skopiowane pliki JS i CSS w odpowiednich katalogach.

Przesyłanie obrazów na serwer za pomocą Trix wymaga dodania kodu JavaScript. Więc utwórz attachments.jsplik i trzymaj go w public/jsfolderze. Kod do tego pliku dodamy w dalszej części samouczka.

Dodaj następujący kod HTML do pliku blade, który wyświetli edytor 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>

Powyższy kod HTML wyświetli Trix na twojej stronie internetowej, jak pokazano na zrzucie ekranu poniżej.

Zauważ, że umieszczamy edytor Trix w HTML za pomocą trix-editortagu. Ukryte pole o nazwie „treść” służy do pobierania lub wyświetlania zawartości w Edytorze Trix. Kiedy wpisujemy cokolwiek w Trix, ta sama zawartość jest ustawiana w tym ukrytym polu. Po stronie serwera otrzymamy zawartość edytora Trix za pomocą poniższej instrukcji.

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

W ten sam sposób, jeśli chcesz wyświetlić wstępnie wypełnioną zawartość w Trix, ustaw wartość na ukryte pole w następujący sposób.

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

Prześlij obraz w edytorze Trix

Jeśli chcesz używać obrazów w treści, to oczywiście musisz wgrać obraz na serwer. Edytor Trix udostępnia zdarzenie, trix-attachment-addza pomocą którego prześlemy obraz przez Ajax. Zdefiniujmy dla niego trasę.

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

Dostosuj nazwę kontrolera w trasie. W metodzie upload kontrolera wpisz kod w następujący sposób.

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

Tutaj przechowuję obrazy w public/uploadsfolderze. Może być konieczne utworzenie dowiązania symbolicznego do folderu przechowywania za pomocą polecenia:

php artisan storage:link

Stworzyliśmy attachments.jsplik, który zostanie użyty do wywołania Ajax na zdarzeniu trix-attachment-add. Dodaj poniższy kod do attachments.jspliku.

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

W powyższym kodzie powinieneś przekazać trasę do HOSTzmiennej. Laravel wymaga tokena CSRF w każdym żądaniu. Ten token CSRF otrzymujemy z metatagu HTML, który dodaliśmy w pliku blade. Kiedy dodajesz obraz w Trix, daje wywołanie Ajax, przesyła obraz na serwer i zwraca ścieżkę załadowanego obrazu.

Mam nadzieję, że rozumiesz, jak zainstalować i używać edytora Trix w Laravel. Podziel się swoimi przemyśleniami i sugestiami w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net