{"id":29204,"date":"2021-06-09T18:13:00","date_gmt":"2021-06-09T15:13:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29204"},"modified":"2021-10-18T03:35:52","modified_gmt":"2021-10-18T00:35:52","slug":"jak-zainstalowac-i-uzywac-edytora-trix-w-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-zainstalowac-i-uzywac-edytora-trix-w-laravel\/","title":{"rendered":"Jak zainstalowa\u0107 i u\u017cywa\u0107 edytora Trix w Laravel?"},"content":{"rendered":"

Zarz\u0105dzaj\u0105c stron\u0105 internetow\u0105 zawsze potrzebujemy bogatego edytora tekstu (WYSIWYG). Je\u015bli chcesz doda\u0107 opisow\u0105 zawarto\u015b\u0107 zawieraj\u0105c\u0105 HTML, jedynym wyborem jest edytor WYSIWYG. Nie mo\u017cesz doda\u0107 tego rodzaju tre\u015bci do obszaru tekstowego. W Internecie dost\u0119pnych jest kilka bogatych edytor\u00f3w tekstu, takich jak TinyMCE<\/a>, CKEditor<\/a>. Jednym z nich jest Trix Editor<\/a>. Jako programista na pewno s\u0142ysza\u0142e\u015b o Basecamp. Edytor Trix jest u\u017cywany w Basecamp do zarz\u0105dzania tre\u015bci\u0105. Tyle mo\u017cna powiedzie\u0107 o popularno\u015bci edytora Trix.<\/p>\n

W tym artykule dowiemy si\u0119, jak zainstalowa\u0107 i u\u017cywa\u0107 edytora Trix w Laravel. Zobaczymy r\u00f3wnie\u017c, jak wgrywa\u0107 obrazy w edytorze Trix.<\/p>\n

Instalacja edytora Trix<\/h3>\n

Aby rozpocz\u0105\u0107 prac\u0119 z Trix, musisz najpierw do\u0142\u0105czy\u0107 ich plik JS i CSS. Mo\u017cesz znale\u017a\u0107 te pliki na ich stronie GitHub w katalogu dist<\/a>. Pobierz 2 pliki trix.js<\/code>i trix.css<\/code>co wymaga\u0107 b\u0119dzie wkr\u00f3tce.<\/p>\n

Poniewa\u017c musimy do\u0142\u0105czy\u0107 zasoby, utw\u00f3rz foldery \u201ejs" i \u201ecss” w publicznym katalogu twojego projektu Laravel. Umie\u015b\u0107 skopiowane pliki JS i CSS w odpowiednich katalogach.<\/p>\n

Przesy\u0142anie obraz\u00f3w na serwer za pomoc\u0105 Trix wymaga dodania kodu JavaScript. Wi\u0119c utw\u00f3rz attachments.js<\/code>plik i trzymaj go w public\/js<\/code>folderze. Kod do tego pliku dodamy w dalszej cz\u0119\u015bci samouczka.<\/p>\n

Dodaj nast\u0119puj\u0105cy kod HTML do pliku blade, kt\u00f3ry wy\u015bwietli edytor 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
Powy\u017cszy kod HTML wy\u015bwietli Trix na twojej stronie internetowej, jak pokazano na zrzucie ekranu poni\u017cej.<\/p>\n
Zauwa\u017c, \u017ce umieszczamy edytor Trix w HTML za pomoc\u0105 trix-editor<\/code>tagu. Ukryte pole o nazwie \u201etre\u015b\u0107” s\u0142u\u017cy do pobierania lub wy\u015bwietlania zawarto\u015bci w Edytorze Trix. Kiedy wpisujemy cokolwiek w Trix, ta sama zawarto\u015b\u0107 jest ustawiana w tym ukrytym polu. Po stronie serwera otrzymamy zawarto\u015b\u0107 edytora Trix za pomoc\u0105 poni\u017cszej instrukcji.<\/p>\n
echo $request->input('content');<\/code><\/pre>\n
W ten sam spos\u00f3b, je\u015bli chcesz wy\u015bwietli\u0107 wst\u0119pnie wype\u0142nion\u0105 zawarto\u015b\u0107 w Trix, ustaw warto\u015b\u0107 na ukryte pole w nast\u0119puj\u0105cy spos\u00f3b.<\/p>\n
<input id=\"x\" type=\"hidden\" name=\"content\" value=\"<h1>This is content<\/h1>\" \/><\/code><\/pre>\n
Prze\u015blij obraz w edytorze Trix<\/h3>\n
Je\u015bli chcesz u\u017cywa\u0107 obraz\u00f3w w tre\u015bci, to oczywi\u015bcie musisz wgra\u0107 obraz na serwer. Edytor Trix udost\u0119pnia zdarzenie, trix-attachment-add<\/code>za pomoc\u0105 kt\u00f3rego prze\u015blemy obraz przez Ajax. Zdefiniujmy dla niego tras\u0119.<\/p>\n
Route::post('upload', 'ProductController@upload');<\/code><\/pre>\n
Dostosuj nazw\u0119 kontrolera w trasie. W metodzie upload kontrolera wpisz kod w nast\u0119puj\u0105cy spos\u00f3b.<\/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
Tutaj przechowuj\u0119 obrazy w public\/uploads<\/code>folderze. Mo\u017ce by\u0107 konieczne utworzenie dowi\u0105zania symbolicznego do folderu przechowywania za pomoc\u0105 polecenia:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Stworzyli\u015bmy attachments.js<\/code>plik, kt\u00f3ry zostanie u\u017cyty do wywo\u0142ania Ajax na zdarzeniu trix-attachment-add<\/code>. Dodaj poni\u017cszy kod do attachments.js<\/code>pliku.<\/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
W powy\u017cszym kodzie powiniene\u015b przekaza\u0107 tras\u0119 do HOST<\/code>zmiennej. Laravel wymaga tokena CSRF w ka\u017cdym \u017c\u0105daniu. Ten token CSRF otrzymujemy z metatagu HTML, kt\u00f3ry dodali\u015bmy w pliku blade. Kiedy dodajesz obraz w Trix, daje wywo\u0142anie Ajax, przesy\u0142a obraz na serwer i zwraca \u015bcie\u017ck\u0119 za\u0142adowanego obrazu.<\/p>\n
Mam nadziej\u0119, \u017ce rozumiesz, jak zainstalowa\u0107 i u\u017cywa\u0107 edytora Trix w Laravel. Podziel si\u0119 swoimi przemy\u015bleniami i sugestiami w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n