So installieren und verwenden Sie den Trix-Editor in Laravel

Last updated 18. Oktober 2021

Inhalt

Bei der Verwaltung einer Website benötigen wir immer einen Rich-Text-Editor (WYSIWYG). Wenn Sie beschreibenden Inhalt hinzufügen möchten, der HTML enthält, ist der WYSIWYG-Editor die einzige Wahl. Sie können solche Inhalte nicht in den Textbereich einfügen. Es gibt mehrere Rich-Text-Editoren wie TinyMCE, CKEditor, die im Internet verfügbar sind. Trix Editor ist einer davon. Als Entwickler müssen Sie von Basecamp gehört haben. Der Trix-Editor wird in Basecamp zum Verwalten von Inhalten verwendet. Dies ist genug, um über die Popularität des Trix-Editors zu sagen.

In diesem Artikel untersuchen wir, wie Sie den Trix-Editor in Laravel installieren und verwenden. Wir werden auch sehen, wie Sie Bilder im Trix-Editor hochladen.

Installation des Trix-Editors

Um mit Trix zu beginnen, müssen Sie zunächst die JS- und CSS-Datei einbinden. Sie finden diese Dateien auf ihrer GitHub-Seite unter dem Verzeichnis dist. Laden Sie 2 Dateien herunter trix.jsund trix.cssdie werden bald benötigt.

Da wir Assets einschließen müssen, erstellen Sie einen ‘js’- und ‘css’-Ordner im öffentlichen Verzeichnis Ihres Laravel-Projekts. Legen Sie die kopierten JS- und CSS-Dateien in die entsprechenden Verzeichnisse.

Für das Hochladen von Bildern auf den Server mit Trix müssen Sie JavaScript-Code hinzufügen. Erstellen Sie also eine attachments.jsDatei und bewahren Sie sie im public/jsOrdner auf. Wir werden dieser Datei im späteren Teil des Tutorials Code hinzufügen.

Fügen Sie der Blade-Datei den folgenden HTML-Code hinzu, der den Trix-Editor anzeigt.

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

Der obige HTML-Code zeigt die Trix auf Ihrer Webseite an, wie im Screenshot unten gezeigt.

Beachten Sie, dass wir den Trix-Editor mithilfe des trix-editorTags in HTML platzieren. Das versteckte Feld mit dem Namen ‘content’ dient zum Abrufen oder Anzeigen von Inhalten im Trix Editor. Wenn wir etwas in Trix eingeben, wird derselbe Inhalt in dieses versteckte Feld gesetzt. Serverseitig erhalten wir den Inhalt des Trix-Editors mit der folgenden Anweisung.

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

Wenn Sie in Trix vorausgefüllte Inhalte anzeigen möchten, setzen Sie den Wert auf das ausgeblendete Feld analog wie folgt.

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

Bild im Trix Editor hochladen

Wenn Sie Bilder im Inhalt verwenden möchten, müssen Sie das Bild natürlich auf den Server hochladen. Der Trix-Editor bietet ein Ereignis, trix-attachment-addmit dem wir das Bild über Ajax hochladen. Lassen Sie uns eine Route dafür definieren.

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

Passen Sie den Controller-Namen in der Route an. Schreiben Sie in der Upload-Methode von Controller den Code wie folgt.

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

Hier speichere ich Bilder unter dem public/uploadsOrdner. Möglicherweise müssen Sie mit dem folgenden Befehl einen symbolischen Link zum Speicherordner erstellen:

php artisan storage:link

Wir haben eine attachments.jsDatei erstellt, die verwendet wird, um einen Ajax-Aufruf für das Ereignis zu tätigen trix-attachment-add. Fügen Sie den folgenden Code in die attachments.jsDatei ein.

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

Im obigen Code sollten Sie die Route an eine HOSTVariable übergeben. Laravel benötigt in jeder Anfrage ein CSRF-Token. Dieses CSRF-Token erhalten wir aus dem HTML-Meta-Tag, das wir in der Blade-Datei hinzugefügt haben. Wenn Sie das Bild in Trix hinzufügen, gibt es einen Ajax-Aufruf, lädt das Bild auf den Server hoch und gibt den Pfad des hochgeladenen Bildes zurück.

Ich hoffe, Sie verstehen, wie Sie den Trix-Editor in Laravel installieren und verwenden. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net