{"id":25601,"date":"2021-06-09T18:27:00","date_gmt":"2021-06-09T15:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25601"},"modified":"2021-10-18T02:07:40","modified_gmt":"2021-10-17T23:07:40","slug":"comment-installer-et-utiliser-trix-editor-dans-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-installer-et-utiliser-trix-editor-dans-laravel\/","title":{"rendered":"Comment installer et utiliser Trix Editor dans Laravel"},"content":{"rendered":"

Lors de la gestion d’un site Web, nous avons toujours besoin d’un \u00e9diteur de texte riche (WYSIWYG). Si vous souhaitez ajouter un contenu descriptif contenant du HTML, l’\u00e9diteur WYSIWYG est le seul choix. Vous ne pouvez pas ajouter ce type de contenu dans la zone de texte. Il existe plusieurs \u00e9diteurs de texte enrichi comme TinyMCE<\/a>, CKEditor<\/a> sont disponibles sur Internet. Trix Editor<\/a> est l’un d’entre eux. En tant que d\u00e9veloppeur, vous devez avoir entendu parler de Basecamp. L’\u00e9diteur Trix est utilis\u00e9 dans Basecamp pour g\u00e9rer le contenu. C’est assez dire de la popularit\u00e9 de l’\u00e9diteur Trix.<\/p>\n

Dans cet article, nous \u00e9tudions comment installer et utiliser l’\u00e9diteur Trix dans Laravel. Nous verrons \u00e9galement comment t\u00e9l\u00e9charger des images dans l’\u00e9diteur Trix.<\/p>\n

Installation de l’\u00e9diteur Trix<\/h3>\n

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\u00e9pertoire dist<\/a>. T\u00e9l\u00e9chargez 2 fichiers trix.js<\/code>et trix.css<\/code>qui n\u00e9cessiteront bient\u00f4t.<\/p>\n

Comme nous devons inclure des actifs, cr\u00e9ez un dossier ‘js’ et ‘css’ dans le r\u00e9pertoire public de votre projet Laravel. Placez les fichiers JS et CSS copi\u00e9s dans les r\u00e9pertoires respectifs.<\/p>\n

Le t\u00e9l\u00e9chargement d’images sur le serveur \u00e0 l’aide de Trix n\u00e9cessite l’ajout de code JavaScript. Cr\u00e9ez donc un attachments.js<\/code>fichier et conservez-le dans un public\/js<\/code>dossier. Nous ajouterons du code \u00e0 ce fichier dans la derni\u00e8re partie du didacticiel.<\/p>\n

Ajoutez le code HTML suivant dans le fichier blade qui affichera l’\u00e9diteur Trix.<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"{{ asset('\/css\/trix.css') }}\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<form method=\"post\" action={{ url('ROUTE_HERE') }}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"x\" type=\"hidden\" name=\"content\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<trix-editor input=\"x\"><\/trix-editor>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<script src=\"{{ asset('js\/trix.js') }}\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"{{ asset('js\/attachments.js') }}\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Le code HTML ci-dessus affichera le Trix sur votre page Web, comme indiqu\u00e9 dans la capture d’\u00e9cran ci-dessous.<\/p>\n
Remarquez, nous pla\u00e7ons l’\u00e9diteur Trix en HTML \u00e0 l’aide de la trix-editor<\/code>balise. Le champ masqu\u00e9 avec le nom ‘content’ est utilis\u00e9 pour obtenir ou afficher du contenu dans Trix Editor. Lorsque nous tapons quelque chose dans Trix, le m\u00eame contenu est d\u00e9fini sur ce champ cach\u00e9. C\u00f4t\u00e9 serveur, nous obtiendrons le contenu de l’\u00e9diteur Trix en utilisant l’instruction ci-dessous.<\/p>\n
echo $request->input('content');<\/code><\/pre>\n
De la m\u00eame mani\u00e8re, si vous souhaitez afficher du contenu pr\u00e9-rempli dans Trix, d\u00e9finissez la valeur sur le champ masqu\u00e9 comme suit.<\/p>\n
<input id=\"x\" type=\"hidden\" name=\"content\" value=\"<h1>This is content<\/h1>\" \/><\/code><\/pre>\n
T\u00e9l\u00e9charger l’image dans l’\u00e9diteur Trix<\/h3>\n
Si vous souhaitez utiliser des images dans le contenu, vous devez bien s\u00fbr t\u00e9l\u00e9charger l’image sur le serveur. L’\u00e9diteur Trix fournit un \u00e9v\u00e9nement \u00e0 l’ trix-attachment-add<\/code>aide duquel nous t\u00e9l\u00e9chargerons l’image via Ajax. D\u00e9finissons un itin\u00e9raire pour cela.<\/p>\n
Route::post('upload', 'ProductController@upload');<\/code><\/pre>\n
Ajustez le nom du contr\u00f4leur dans la route. Dans la m\u00e9thode de t\u00e9l\u00e9chargement du contr\u00f4leur, \u00e9crivez le code comme suit.<\/p>\n
public function upload(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if($request->hasFile('file')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('file')->getClientOriginalName();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('file')->getClientOriginalExtension();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('file')->storeAs('public\/uploads', $filenametostore);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ you can save image path below in database\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$path = asset('storage\/uploads\/'.$filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $path;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0exit;\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Ici, je stocke des images sous le public\/uploads<\/code>dossier. Vous devrez peut-\u00eatre cr\u00e9er un lien symbolique vers le dossier de stockage \u00e0 l’aide de la commande\u00a0:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Nous avons cr\u00e9\u00e9 un attachments.js<\/code>fichier qui sera utilis\u00e9 pour donner un appel Ajax sur l’\u00e9v\u00e9nement trix-attachment-add<\/code>. Ajoutez le code ci-dessous dans le attachments.js<\/code>fichier.<\/p>\n
(function() {\n\u00a0\u00a0\u00a0\u00a0var HOST = \"http:\/\/localhost:8000\/upload\"; \/\/pass the route\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0addEventListener(\"trix-attachment-add\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (event.attachment.file) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFileAttachment(event.attachment)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0function uploadFileAttachment(attachment) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFile(attachment.file, setProgress, setAttributes)\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function setProgress(progress) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0attachment.setUploadProgress(progress)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function setAttributes(attributes) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0attachment.setAttributes(attributes)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0function uploadFile(file, progressCallback, successCallback) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var formData = createFormData(file);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var xhr = new XMLHttpRequest();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.open(\"POST\", HOST, true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.setRequestHeader( 'X-CSRF-TOKEN', getMeta( 'csrf-token') );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.upload.addEventListener(\"progress\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var progress = event.loaded \/ event.total * 100\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0progressCallback(progress)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.addEventListener(\"load\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var attributes = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: xhr.responseText,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0href: xhr.responseText + \"?content-disposition=attachment\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0successCallback(attributes)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.send(formData)\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0function createFormData(file) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = new FormData()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data.append(\"Content-Type\", file.type)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data.append(\"file\", file)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return data\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0function getMeta(metaName) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const metas = document.getElementsByTagName('meta');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (let i = 0; i < metas.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (metas[i].getAttribute('name') === metaName) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return metas[i].getAttribute('content');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return '';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n})();<\/code><\/pre>\n
Dans le code ci-dessus, vous devez passer la route \u00e0 la HOST<\/code>variable. Laravel requiert un jeton CSRF dans chaque requ\u00eate. Nous obtenons ce jeton CSRF \u00e0 partir de la balise meta HTML que nous avons ajout\u00e9e dans le fichier blade. Lorsque vous ajoutez l’image dans Trix, il lance un appel Ajax, t\u00e9l\u00e9charge l’image sur le serveur et renvoie le chemin de l’image t\u00e9l\u00e9charg\u00e9e.<\/p>\n
J’esp\u00e8re que vous comprenez comment installer et utiliser l’\u00e9diteur Trix dans Laravel. S’il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n