{"id":24247,"date":"2021-05-14T12:18:00","date_gmt":"2021-05-14T09:18:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24247"},"modified":"2021-10-18T02:18:47","modified_gmt":"2021-10-17T23:18:47","slug":"trix-un-editeur-wysiwyg-open-source-pour-les-sites-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/trix-un-editeur-wysiwyg-open-source-pour-les-sites-web\/","title":{"rendered":"Trix – Un \u00e9diteur WYSIWYG Open Source pour les sites Web"},"content":{"rendered":"

Un \u00e9diteur de texte enrichi ou un \u00e9diteur WYSIWYG est utile pour r\u00e9diger un contenu descriptif comprenant des \u00e9l\u00e9ments HTML et des images. Dans la balise HTML textarea, on ne peut pas \u00e9crire de contenu avec des balises HTML. C’est pourquoi la plupart des sites Web utilisent l’\u00e9diteur HTML WYSIWYG.<\/p>\n

Trix<\/a> est un \u00e9diteur de texte riche open source de Basecamp. Comme il est utilis\u00e9 dans Basecamp, des millions de personnes l’utilisent d\u00e9j\u00e0 pour r\u00e9diger leur contenu. Dans cet article, nous \u00e9tudions comment ajouter l’\u00e9diteur Trix dans vos applications web.<\/p>\n

Installation<\/h3>\n

Trix a h\u00e9berg\u00e9 son package sur GitHub<\/a> afin que les utilisateurs puissent facilement utiliser ce bel \u00e9diteur dans leurs applications Web. Pour commencer, vous devez d’abord inclure les fichiers JS et CSS de Trix. Vous pouvez obtenir ces fichiers directement dans le dossier dist \u00e0 partir de leur page GitHub<\/a>. Ou bien, t\u00e9l\u00e9chargez leur package et copiez trix.js<\/code>et trix.css<\/code>fichiers.<\/p>\n

Vous devez \u00e9galement cr\u00e9er 2 fichiers PHP et un autre fichier JS. Nous verrons pourquoi et comment utiliser ces fichiers dans la suite. La structure de votre dossier doit \u00eatre la suivante\u00a0:<\/p>\n

\"Trix<\/a><\/p>\n

Ensuite, pour ajouter l’\u00e9diteur Trix sur votre page Web, \u00e9crivez le code ci-dessous.<\/p>\n

index.php<\/strong><\/p>\n

<link rel=\"stylesheet\" href=\"css\/trix.css\">\n<script src=\"js\/trix.js\"><\/script>\n<script src=\"js\/attachments.js\"><\/script>\n<form method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<input id=\"x\" type=\"hidden\" name=\"content\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<trix-editor input=\"x\"><\/trix-editor>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form><\/code><\/pre>\n
Dans le code ci-dessus, nous avons ajout\u00e9 directement les fichiers CSS et JS. Bien s\u00fbr, vous devez suivre les directives de votre framework\/CMS pour inclure ces fichiers.<\/p>\n
L’\u00e9diteur Trix ajoute tout le contenu \u00e9crit au champ cach\u00e9 que nous avons ajout\u00e9 ci-dessus. Et lorsque vous soumettez le formulaire, vous devez continuer avec le champ masqu\u00e9 pour obtenir le contenu de l’\u00e9diteur. Fondamentalement, vous obtiendrez le contenu de l’\u00e9diteur Trix c\u00f4t\u00e9 serveur en utilisant\u00a0:<\/p>\n
<?php\necho $_POST['content']; \/\/here 'content' is the name given to hidden field<\/code><\/pre>\n
De la m\u00eame mani\u00e8re, vous souhaitez pr\u00e9-remplir l’\u00e9diteur avec le contenu puis passer le contenu dans les attributs de valeur du champ masqu\u00e9. L’\u00e9diteur Trix remplit automatiquement le contenu \u00e0 partir d’un \u00e9l\u00e9ment masqu\u00e9.<\/p>\n
Ensuite, ex\u00e9cutez ce fichier dans votre navigateur et vous devriez voir votre \u00e9diteur WYSIWYG sur la page.<\/p>\n
\"Trix<\/a><\/p>\n
T\u00e9l\u00e9charger l’image dans l’\u00e9diteur Trix WYSIWYG<\/h3>\n
Sur la documentation GitHub, ils ont mentionn\u00e9 le stockage des fichiers joints.<\/p>\n
Trix accepte automatiquement les fichiers gliss\u00e9s ou coll\u00e9s dans un \u00e9diteur et les ins\u00e8re en pi\u00e8ces jointes dans le document. Chaque pi\u00e8ce jointe est consid\u00e9r\u00e9e comme en attente jusqu’\u00e0 ce que vous la stockiez \u00e0 distance et que vous fournissiez \u00e0 Trix une URL permanente.<\/p>\n
Cela signifie que vous devez prendre une image de l’\u00e9diteur, l’envoyer c\u00f4t\u00e9 serveur, t\u00e9l\u00e9charger des images sur le serveur et renvoyer l’URL de l’image. Pour effectuer ce processus, nous allons \u00e9crire du code JS et PHP dans les prochaines \u00e9tapes.<\/p>\n
Tout d’abord, commen\u00e7ons par le code JS. Vous avez cr\u00e9\u00e9 un attachments.js<\/code>fichier dans le r\u00e9pertoire ‘js’. Ce fichier JS aura le code suivant.<\/p>\n
(function() {\n\u00a0\u00a0\u00a0\u00a0var HOST = \"YOUR_DOMAIN_URL\/upload.php\"\n\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\n\u00a0\u00a0\u00a0\u00a0function uploadFileAttachment(attachment) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFile(attachment.file, setProgress, setAttributes)\n\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\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\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\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.open(\"POST\", HOST, true)\n\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\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\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.send(formData)\n\u00a0\u00a0\u00a0\u00a0}\n\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})();<\/code><\/pre>\n
Remplacez l’espace r\u00e9serv\u00e9 "YOUR_DOMAIN_URL" par votre URL r\u00e9elle. Ce que fait ce code, c’est qu’il \u00e9coute l’ trix-attachment-add<\/code>\u00e9v\u00e9nement, envoie une pi\u00e8ce jointe au upload.php<\/code>fichier. Au retour de la r\u00e9ponse du serveur, il d\u00e9finit l’URL de l’image permanente dans les attributs de l’\u00e9diteur.<\/p>\n
Enfin, \u00e9crivez le code de t\u00e9l\u00e9chargement de l’image dans le upload.php<\/code>fichier.<\/p>\n
<?php\nif (!file_exists('uploads')) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'.$_FILES['file']['name']);\n\u00a0\necho \"YOUR_DOMAIN_URL\/uploads\/\".$_FILES['file']['name'];<\/code><\/pre>\n
Nous esp\u00e9rons que vous comprendrez comment ajouter l’\u00e9diteur Trix WYSIWYG en utilisant PHP sur votre site Web. Nous aimerions entendre vos pens\u00e9es dans la section des commentaires ci-dessous.<\/p>\n