{"id":29335,"date":"2021-06-09T18:29:00","date_gmt":"2021-06-09T15:29:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29335"},"modified":"2021-10-17T04:21:56","modified_gmt":"2021-10-17T01:21:56","slug":"hur-man-installerar-och-anvander-trix-editor-i-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-installerar-och-anvander-trix-editor-i-laravel\/","title":{"rendered":"Hur man installerar och anv\u00e4nder Trix Editor i Laravel"},"content":{"rendered":"

N\u00e4r vi hanterar en webbplats beh\u00f6ver vi alltid en rich text editor (WYSIWYG). Om du vill l\u00e4gga till beskrivande inneh\u00e5ll som inneh\u00e5ller HTML \u00e4r WYSIWYG-redigeraren det enda valet. Du kan inte l\u00e4gga till en s\u00e5dan typ av inneh\u00e5ll i textomr\u00e5det. Det finns flera textredigerare som TinyMCE<\/a>, CKEditor<\/a> finns p\u00e5 Internet. Trix Editor<\/a> \u00e4r en av dem. Som utvecklare m\u00e5ste du ha h\u00f6rt talas om Basecamp. Trix-redigeraren anv\u00e4nds i Basecamp f\u00f6r hantering av inneh\u00e5ll. Detta r\u00e4cker f\u00f6r att s\u00e4ga om Trix-redakt\u00f6rens popularitet.<\/p>\n

I den h\u00e4r artikeln studerar vi hur man installerar och anv\u00e4nder Trix-redigeraren i Laravel. Vi kommer ocks\u00e5 att se hur man laddar upp bilder i Trix-redigeraren.<\/p>\n

Installation av Trix Editor<\/h3>\n

F\u00f6r att komma ig\u00e5ng med Trix m\u00e5ste du f\u00f6rst inkludera deras JS- och CSS-fil. Du hittar dessa filer p\u00e5 deras GitHub-sida under dist-katalogen<\/a>. Ladda ner 2 filer trix.js<\/code>och trix.css<\/code>som snart kommer att kr\u00e4vas.<\/p>\n

Eftersom vi m\u00e5ste inkludera tillg\u00e5ngar, skapa en ’js’ och ’css’ mapp i den offentliga katalogen f\u00f6r ditt Laravel-projekt. Placera de kopierade JS- och CSS-filerna i respektive kataloger.<\/p>\n

F\u00f6r att ladda upp bilder p\u00e5 servern med Trix m\u00e5ste du l\u00e4gga till JavaScript-kod. S\u00e5 skapa en attachments.js<\/code>fil och beh\u00e5ll den under public\/js<\/code>mappen. Vi l\u00e4gger till kod i den h\u00e4r filen i den senare delen av sj\u00e4lvstudien.<\/p>\n

L\u00e4gg till f\u00f6ljande HTML i bladfilen som visar Trix-redigeraren.<\/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
Ovanst\u00e5ende HTML visar Trix p\u00e5 din webbsida som visas p\u00e5 sk\u00e4rmdumpen nedan.<\/p>\n
Observera att vi placerar Trix-redigeraren i HTML med hj\u00e4lp av trix-editor<\/code>taggen. Det dolda f\u00e4ltet med namnet "inneh\u00e5ll" anv\u00e4nds f\u00f6r att h\u00e4mta eller visa inneh\u00e5ll i Trix Editor. N\u00e4r vi skriver n\u00e5got i Trix, \u00e4r samma inneh\u00e5ll inst\u00e4llt p\u00e5 det h\u00e4r dolda f\u00e4ltet. P\u00e5 serversidan f\u00e5r vi inneh\u00e5llet i Trix-redigeraren med nedanst\u00e5ende uttalande.<\/p>\n
echo $request->input('content');<\/code><\/pre>\n
P\u00e5 samma s\u00e4tt, om du vill visa f\u00f6rfylldt inneh\u00e5ll i Trix, st\u00e4ll in v\u00e4rdet till det dolda f\u00e4ltet enligt f\u00f6ljande.<\/p>\n
<input id=\"x\" type=\"hidden\" name=\"content\" value=\"<h1>This is content<\/h1>\" \/><\/code><\/pre>\n
Ladda upp bild i Trix Editor<\/h3>\n
Om du vill anv\u00e4nda bilder i inneh\u00e5llet m\u00e5ste du naturligtvis ladda upp bilden p\u00e5 servern. Trix-redigeraren tillhandah\u00e5ller en h\u00e4ndelse trix-attachment-add<\/code>d\u00e4r vi laddar upp bilden via Ajax. L\u00e5t oss definiera en rutt f\u00f6r den.<\/p>\n
Route::post('upload', 'ProductController@upload');<\/code><\/pre>\n
Justera regulatorns namn i rutten. I kodens uppladdningsmetod skriver du koden enligt f\u00f6ljande.<\/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
H\u00e4r lagrar jag bilder under public\/uploads<\/code>mappen. Du kan beh\u00f6va skapa en symbolisk l\u00e4nk till lagringsmappen med kommandot:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Vi har skapat en attachments.js<\/code>fil som kommer att anv\u00e4ndas f\u00f6r att ringa ett Ajax-samtal p\u00e5 evenemanget trix-attachment-add<\/code>. L\u00e4gg till koden nedan i attachments.js<\/code>filen.<\/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
I koden ovan ska du skicka rutten till HOST<\/code>variabel. Laravel kr\u00e4ver en CSRF-token i varje beg\u00e4ran. Vi f\u00e5r den h\u00e4r CSRF-token fr\u00e5n HTML-metataggen som vi lade till i bladfilen. N\u00e4r du l\u00e4gger till bilden i Trix ger den ett Ajax-samtal, laddar upp bilden p\u00e5 servern och returnerar s\u00f6kv\u00e4gen till den uppladdade bilden.<\/p>\n
Jag hoppas att du f\u00f6rst\u00e5r hur du installerar och anv\u00e4nder Trix-redigeraren i Laravel. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n