{"id":25557,"date":"2021-06-09T17:45:00","date_gmt":"2021-06-09T14:45:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25557"},"modified":"2021-10-17T20:23:05","modified_gmt":"2021-10-17T17:23:05","slug":"kuinka-asentaa-ja-kayttaa-trix-editoria-laravelissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-asentaa-ja-kayttaa-trix-editoria-laravelissa\/","title":{"rendered":"Kuinka asentaa ja k\u00e4ytt\u00e4\u00e4 Trix Editoria Laravelissa"},"content":{"rendered":"

Sivustoa hallinnoidessamme tarvitsemme aina rikkaan tekstieditorin (WYSIWYG). Jos haluat lis\u00e4t\u00e4 kuvailevaa sis\u00e4lt\u00f6\u00e4, joka sis\u00e4lt\u00e4\u00e4 HTML: t\u00e4, WYSIWYG-editori on ainoa valinta. Et voi lis\u00e4t\u00e4 t\u00e4llaista sis\u00e4lt\u00f6\u00e4 tekstialueeseen. Internetiss\u00e4 on useita rikkaan tekstin muokkaajia, kuten TinyMCE<\/a>, CKEditor<\/a>. Trix Editor<\/a> on yksi niist\u00e4. Kehitt\u00e4j\u00e4n\u00e4 sinun on oltava kuullut Basecampista. Trix-editoria k\u00e4ytet\u00e4\u00e4n Basecampissa sis\u00e4ll\u00f6n hallintaan. T\u00e4m\u00e4 riitt\u00e4\u00e4 sanomaan Trix-editorin suosiosta.<\/p>\n

T\u00e4ss\u00e4 artikkelissa tutkitaan Trix-editorin asentamista ja k\u00e4ytt\u00f6\u00e4 Laravelissa. N\u00e4emme my\u00f6s, kuinka kuvia l\u00e4hetet\u00e4\u00e4n Trix-editorissa.<\/p>\n

Trix Editorin asennus<\/h3>\n

Trixin k\u00e4yt\u00f6n aloittamiseksi sinun on ensin sis\u00e4llytett\u00e4v\u00e4 heid\u00e4n JS- ja CSS-tiedosto. L\u00f6yd\u00e4t n\u00e4m\u00e4 tiedostot niiden GitHub-sivulta dist-hakemistosta<\/a>. Lataa 2 tiedostoa trix.js<\/code>ja trix.css<\/code>joka edellytt\u00e4\u00e4 pian.<\/p>\n

Koska meid\u00e4n on sis\u00e4llytett\u00e4v\u00e4 resursseja, luo ’js’ ja ’css’ kansio Laravel-projektisi julkiseen hakemistoon. Sijoita kopioidut JS- ja CSS-tiedostot vastaaviin hakemistoihin.<\/p>\n

Kuvien lataaminen palvelimelle Trixin avulla edellytt\u00e4\u00e4 JavaScript-koodin lis\u00e4\u00e4mist\u00e4. Joten luo attachments.js<\/code>tiedosto ja pid\u00e4 se public\/js<\/code>kansiossa. Lis\u00e4\u00e4mme koodin t\u00e4h\u00e4n tiedostoon opetusohjelman my\u00f6hemm\u00e4ss\u00e4 osassa.<\/p>\n

Lis\u00e4\u00e4 seuraava HTML korttitiedostoon, joka n\u00e4ytt\u00e4\u00e4 Trix-editorin.<\/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
Yll\u00e4 oleva HTML n\u00e4ytt\u00e4\u00e4 Trixin verkkosivustollasi alla olevan kuvakaappauksen mukaisesti.<\/p>\n
Huomaa, ett\u00e4 sijoitamme Trix-editorin HTML-koodiin trix-editor<\/code>tagin avulla. Piilotettua kentt\u00e4\u00e4, jonka nimi on sis\u00e4lt\u00f6, k\u00e4ytet\u00e4\u00e4n sis\u00e4ll\u00f6n hakemiseen tai n\u00e4ytt\u00e4miseen Trix Editorissa. Kun kirjoitamme mit\u00e4 tahansa Trixin sis\u00e4lle, sama sis\u00e4lt\u00f6 asetetaan t\u00e4lle piilotetulle kent\u00e4lle. Palvelinpuolella saamme Trix-editorin sis\u00e4ll\u00f6n alla olevan lauseen avulla.<\/p>\n
echo $request->input('content');<\/code><\/pre>\n
Samalla tavalla, jos haluat n\u00e4ytt\u00e4\u00e4 esit\u00e4ytetyn sis\u00e4ll\u00f6n Trixiss\u00e4, aseta arvoksi piilotettu kentt\u00e4 seuraavasti.<\/p>\n
<input id=\"x\" type=\"hidden\" name=\"content\" value=\"<h1>This is content<\/h1>\" \/><\/code><\/pre>\n
L\u00e4het\u00e4 kuva Trix Editoriin<\/h3>\n
Jos haluat k\u00e4ytt\u00e4\u00e4 kuvia sis\u00e4ll\u00f6ss\u00e4, sinun on tietysti ladattava kuva palvelimelle. Trix editor tarjoaa tapahtuman, trix-attachment-add<\/code>jonka avulla l\u00e4het\u00e4mme kuvan Ajaxin kautta. M\u00e4\u00e4ritet\u00e4\u00e4n sille reitti.<\/p>\n
Route::post('upload', 'ProductController@upload');<\/code><\/pre>\n
S\u00e4\u00e4d\u00e4 ohjaimen nime\u00e4 reitill\u00e4. Kirjoita koodi ohjaimen latausmenetelm\u00e4\u00e4n seuraavasti.<\/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
T\u00e4ss\u00e4 olen tallentamassa kuvia public\/uploads<\/code>kansion alle. Saatat joutua luomaan symbolisen linkin tallennuskansioon komennolla:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Olemme luoneet attachments.js<\/code>tiedoston, jota k\u00e4ytet\u00e4\u00e4n Ajax-puhelun soittamiseen tapahtumaan trix-attachment-add<\/code>. Lis\u00e4\u00e4 alla oleva koodi attachments.js<\/code>tiedostoon.<\/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
Yll\u00e4 olevassa koodissa sinun on v\u00e4litett\u00e4v\u00e4 reitti HOST<\/code>muuttujalle. Laravel vaatii CSRF-tunnuksen jokaisessa pyynn\u00f6ss\u00e4. Saamme t\u00e4m\u00e4n CSRF-tunnuksen HTML-sis\u00e4ll\u00f6nkuvauskent\u00e4st\u00e4, jonka lis\u00e4simme ter\u00e4tiedostoon. Kun lis\u00e4\u00e4t kuvan Trixiin, se antaa Ajax-puhelun, lataa kuvan palvelimelle ja palauttaa ladatun kuvan polun.<\/p>\n
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t Trix-editorin asentamisen ja k\u00e4yt\u00f6n Laravelissa. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n