{"id":24374,"date":"2021-05-14T12:32:00","date_gmt":"2021-05-14T09:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24374"},"modified":"2021-10-18T03:15:52","modified_gmt":"2021-10-18T00:15:52","slug":"trix-un-editor-wysiwyg-open-source-per-siti-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/trix-un-editor-wysiwyg-open-source-per-siti-web\/","title":{"rendered":"Trix – Un editor WYSIWYG open source per siti web"},"content":{"rendered":"

Un editor di testo RTF o un editor WYSIWYG \u00e8 utile per scrivere contenuti descrittivi che includano elementi HTML e immagini. Nel tag textarea HTML, non \u00e8 possibile scrivere contenuto con tag HTML. Questo \u00e8 il motivo per cui la maggior parte dei siti Web utilizza l’editor HTML WYSIWYG.<\/p>\n

Trix<\/a> \u00e8 un editor di testo RTF open source di Basecamp. Poich\u00e9 viene utilizzato in Basecamp, milioni di persone lo utilizzano gi\u00e0 per scrivere i propri contenuti. In questo articolo, studiamo come aggiungere l’editor Trix nelle tue applicazioni web.<\/p>\n

Installazione<\/h3>\n

Trix ha ospitato il proprio pacchetto su GitHub in<\/a> modo che gli utenti possano utilizzare facilmente questo simpatico editor nelle loro applicazioni web. Per iniziare, devi prima includere i file JS e CSS di Trix. Puoi ottenere questi file direttamente nella cartella dist dalla loro pagina GitHub<\/a>. Oppure, scarica il loro pacchetto e copia trix.js<\/code>e trix.css<\/code>file.<\/p>\n

Devi anche creare 2 file PHP e un altro file JS. Vedremo perch\u00e9 e come utilizzare questi file nella parte successiva. La struttura delle tue cartelle dovrebbe essere la seguente:<\/p>\n

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

Successivamente per aggiungere l’editor Trix alla tua pagina web, scrivi il codice qui sotto.<\/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
Nel codice sopra, abbiamo aggiunto direttamente i file CSS e JS. Ovviamente, dovresti seguire le linee guida del tuo framework\/CMS per includere questi file.<\/p>\n
L’editor Trix aggiunge tutto il contenuto scritto al campo nascosto che abbiamo aggiunto sopra. E quando invii il modulo dovresti procedere con il campo nascosto per ottenere il contenuto dall’editor. Fondamentalmente otterrai il contenuto dell’editor Trix sul lato server usando:<\/p>\n
<?php\necho $_POST['content']; \/\/here 'content' is the name given to hidden field<\/code><\/pre>\n
Allo stesso modo, si desidera precompilare l’editor con il contenuto, quindi passare il contenuto negli attributi del valore del campo nascosto. L’editor Trix popola automaticamente il contenuto da un elemento nascosto.<\/p>\n
Quindi, esegui questo file nel tuo browser e dovresti vedere il tuo editor WYSIWYG sulla pagina.<\/p>\n
\"Trix<\/a><\/p>\n
Carica immagine nell’editor WYSIWYG di Trix<\/h3>\n
Nella documentazione di GitHub hanno menzionato l’archiviazione dei file allegati.<\/p>\n
Trix accetta automaticamente i file trascinati o incollati in un editor e li inserisce come allegati nel documento. Ogni allegato \u00e8 considerato in sospeso finch\u00e9 non lo memorizzi in remoto e fornisci a Trix un URL permanente.<\/p>\n
Significa che devi prendere un’immagine dall’editor, inviarla al lato server, caricare le immagini sul server e restituire l’URL dell’immagine. Per eseguire questo processo scriveremo codice JS e PHP nei passaggi successivi.<\/p>\n
Innanzitutto, iniziamo con il codice JS. Hai creato il attachments.js<\/code>file all’interno della directory ‘js’. Questo file JS avr\u00e0 il seguente codice.<\/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
Sostituisci il segnaposto "YOUR_DOMAIN_URL" con il tuo URL effettivo. Ci\u00f2 che fa questo codice \u00e8 ascoltare l’ trix-attachment-add<\/code>evento, inviare un allegato al upload.php<\/code>file. Quando restituisce la risposta dal server, imposta l’URL dell’immagine permanente negli attributi dell’editor.<\/p>\n
Infine, scrivi il codice dell’immagine di caricamento nel upload.php<\/code>file.<\/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
Ci auguriamo che tu capisca come aggiungere l’editor WYSIWYG di Trix utilizzando PHP sul tuo sito web. Ci piacerebbe sentire i tuoi pensieri nella sezione commenti qui sotto.<\/p>\n