Comment installer et utiliser Trix Editor dans Laravel

Dernière mise à jour Oct 18, 2021

Teneur

Installation de l’éditeur Trix

Pour commencer avec Trix, vous devez d’abord inclure leur fichier JS et CSS. Vous pouvez trouver ces fichiers sur leur page GitHub sous le répertoire dist. Téléchargez 2 fichiers trix.jset trix.cssqui nécessiteront bientôt.

Comme nous devons inclure des actifs, créez un dossier ‘js’ et ‘css’ dans le répertoire public de votre projet Laravel. Placez les fichiers JS et CSS copiés dans les répertoires respectifs.

Le téléchargement d’images sur le serveur à l’aide de Trix nécessite l’ajout de code JavaScript. Créez donc un attachments.jsfichier et conservez-le dans un public/jsdossier. Nous ajouterons du code à ce fichier dans la dernière partie du didacticiel.

Ajoutez le code HTML suivant dans le fichier blade qui affichera l’éditeur 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>

Le code HTML ci-dessus affichera le Trix sur votre page Web, comme indiqué dans la capture d’écran ci-dessous.

Remarquez, nous plaçons l’éditeur Trix en HTML à l’aide de la trix-editorbalise. Le champ masqué avec le nom ‘content’ est utilisé pour obtenir ou afficher du contenu dans Trix Editor. Lorsque nous tapons quelque chose dans Trix, le même contenu est défini sur ce champ caché. Côté serveur, nous obtiendrons le contenu de l’éditeur Trix en utilisant l’instruction ci-dessous.

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

De la même manière, si vous souhaitez afficher du contenu pré-rempli dans Trix, définissez la valeur sur le champ masqué comme suit.

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

Télécharger l’image dans l’éditeur Trix

Si vous souhaitez utiliser des images dans le contenu, vous devez bien sûr télécharger l’image sur le serveur. L’éditeur Trix fournit un événement à l’ trix-attachment-addaide duquel nous téléchargerons l’image via Ajax. Définissons un itinéraire pour cela.

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

Ajustez le nom du contrôleur dans la route. Dans la méthode de téléchargement du contrôleur, écrivez le code comme suit.

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

Ici, je stocke des images sous le public/uploadsdossier. Vous devrez peut-être créer un lien symbolique vers le dossier de stockage à l’aide de la commande :

php artisan storage:link

Nous avons créé un attachments.jsfichier qui sera utilisé pour donner un appel Ajax sur l’événement trix-attachment-add. Ajoutez le code ci-dessous dans le attachments.jsfichier.

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

Dans le code ci-dessus, vous devez passer la route à la HOSTvariable. Laravel requiert un jeton CSRF dans chaque requête. Nous obtenons ce jeton CSRF à partir de la balise meta HTML que nous avons ajoutée dans le fichier blade. Lorsque vous ajoutez l’image dans Trix, il lance un appel Ajax, télécharge l’image sur le serveur et renvoie le chemin de l’image téléchargée.

J’espère que vous comprenez comment installer et utiliser l’éditeur Trix dans Laravel. S’il vous plaît partager vos pensées et suggestions dans la section commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net