{"id":24230,"date":"2021-05-14T12:01:00","date_gmt":"2021-05-14T09:01:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24230"},"modified":"2021-10-17T21:00:05","modified_gmt":"2021-10-17T18:00:05","slug":"trix-avoimen-lahdekoodin-wysiwyg-editori-verkkosivustoille","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/trix-avoimen-lahdekoodin-wysiwyg-editori-verkkosivustoille\/","title":{"rendered":"Trix – avoimen l\u00e4hdekoodin WYSIWYG-editori verkkosivustoille"},"content":{"rendered":"

Rich text -editori tai WYSIWYG-editori ovat hy\u00f6dyllisi\u00e4 HTML-elementtej\u00e4 ja kuvia sis\u00e4lt\u00e4v\u00e4n kuvaavan sis\u00e4ll\u00f6n kirjoittamiseen. HTML textarea -tunnisteessa ei voi kirjoittaa sis\u00e4lt\u00f6\u00e4 HTML-tunnisteilla. Siksi suurin osa verkkosivustoista k\u00e4ytt\u00e4\u00e4 WYSIWYG HTML -editoria.<\/p>\n

Trix<\/a> on avoimen l\u00e4hdekoodin rikas tekstieditori Basecampilta. Koska sit\u00e4 k\u00e4ytet\u00e4\u00e4n Basecampissa, miljoonat ihmiset jo k\u00e4ytt\u00e4v\u00e4t sit\u00e4 sis\u00e4ll\u00f6n kirjoittamiseen. T\u00e4ss\u00e4 artikkelissa tutkitaan, miten Trix-editori lis\u00e4t\u00e4\u00e4n verkkosovelluksiisi.<\/p>\n

Asennus<\/h3>\n

Trix is\u00e4nn\u00f6i pakettiaan GitHubissa,<\/a> jotta k\u00e4ytt\u00e4j\u00e4t voivat helposti k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 mukavaa editoria verkkosovelluksissaan. Aloittamiseksi sinun on ensin sis\u00e4llytett\u00e4v\u00e4 Trixin JS- ja CSS-tiedostot. Voit saada n\u00e4m\u00e4 tiedostot suoraan dist-kansioon GitHub-<\/a> sivulta. Tai muuten, lataavat paketti ja kopioi trix.js<\/code>ja trix.css<\/code>tiedostoja.<\/p>\n

Sinun on my\u00f6s luotava 2 PHP-tiedostoa ja yksi lis\u00e4\u00e4 JS-tiedostoja. N\u00e4emme miksi ja miten n\u00e4it\u00e4 tiedostoja k\u00e4ytet\u00e4\u00e4n my\u00f6hemm\u00e4ss\u00e4 osassa. Kansiorakenteen tulee olla seuraava:<\/p>\n

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

Kirjoita seuraava koodi lis\u00e4t\u00e4ksesi Trix-editorin verkkosivullesi.<\/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
Yll\u00e4 olevaan koodiin lis\u00e4simme CSS- ja JS-tiedostot suoraan. Tietenkin sinun on noudatettava kehys- \/ CMS-ohjeita sis\u00e4llytt\u00e4\u00e4ksesi n\u00e4m\u00e4 tiedostot.<\/p>\n
Trix-editori liitt\u00e4\u00e4 kaiken kirjoitetun sis\u00e4ll\u00f6n piilotettuun kentt\u00e4\u00e4n, jonka olemme lis\u00e4nneet yll\u00e4. Kun l\u00e4het\u00e4t lomakkeen, jatka piilotettua kentt\u00e4\u00e4 saadaksesi sis\u00e4ll\u00f6n editorista. Pohjimmiltaan saat Trix-editorin sis\u00e4ll\u00f6n palvelinpuolelle k\u00e4ytt\u00e4m\u00e4ll\u00e4:<\/p>\n
<?php\necho $_POST['content']; \/\/here 'content' is the name given to hidden field<\/code><\/pre>\n
Samalla tavalla haluat esit\u00e4ytt\u00e4\u00e4 editorin sis\u00e4ll\u00f6ll\u00e4 ja siirt\u00e4\u00e4 sitten sis\u00e4ll\u00f6n piilotetun kent\u00e4n arvoattribuutteihin. Trix-editori t\u00e4ytt\u00e4\u00e4 sis\u00e4ll\u00f6n automaattisesti piilotetusta elementist\u00e4.<\/p>\n
Suorita sitten t\u00e4m\u00e4 tiedosto selaimessasi ja sinun pit\u00e4isi n\u00e4hd\u00e4 WYSIWYG-editori sivulla.<\/p>\n
\"Trix<\/a><\/p>\n
L\u00e4het\u00e4 kuva Trix WYSIWYG Editoriin<\/h3>\n
He mainitsivat liitteen\u00e4 olevien tiedostojen tallentamisesta GitHub-asiakirjoissa.<\/p>\n
Trix hyv\u00e4ksyy tiedostot, jotka on vedetty tai liitetty editoriin, ja lis\u00e4\u00e4 ne asiakirjan liittein\u00e4. Jokainen liite katsotaan odottavaksi, kunnes tallennat sen et\u00e4n\u00e4 ja annat Trixille pysyv\u00e4n URL-osoitteen.<\/p>\n
Se tarkoittaa, ett\u00e4 sinun on otettava kuva editorista, l\u00e4hetett\u00e4v\u00e4 se palvelinpuolelle, l\u00e4hetett\u00e4v\u00e4 kuvat palvelimelle ja palautettava kuvan URL-osoite. T\u00e4m\u00e4n prosessin suorittamiseksi kirjoitamme JS- ja PHP-koodin seuraaviin vaiheisiin.<\/p>\n
Aloitetaan ensin JS-koodilla. Olet luonut attachments.js<\/code>tiedoston ’js’ -hakemistoon. T\u00e4ll\u00e4 JS-tiedostolla on seuraava koodi.<\/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
Korvaa paikkamerkki ’YOUR_DOMAIN_URL’ todellisella URL-osoitteellasi. Mit\u00e4 t\u00e4m\u00e4 koodi tekee, se kuuntelee trix-attachment-add<\/code>tapahtumia, l\u00e4hett\u00e4\u00e4 liitteen upload.php<\/code>tiedostoon. Palatessaan vastauksen palvelimelta se asettaa pysyv\u00e4n kuvan URL-osoitteen editorin m\u00e4\u00e4ritteisiin.<\/p>\n
Kirjoita lopuksi ladattava kuvakoodi upload.php<\/code>tiedostoon.<\/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
Toivomme, ett\u00e4 ymm\u00e4rr\u00e4t kuinka lis\u00e4t\u00e4 Trix WYSIWYG -editori PHP: n avulla verkkosivustollesi. Haluamme kuulla ajatuksesi alla olevassa kommenttiosassa.<\/p>\n