{"id":28281,"date":"2021-05-20T10:31:00","date_gmt":"2021-05-20T07:31:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28281"},"modified":"2021-10-17T04:47:18","modified_gmt":"2021-10-17T01:47:18","slug":"hur-man-installerar-och-anvander-ckeditor-i-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-installerar-och-anvander-ckeditor-i-laravel\/","title":{"rendered":"Hur man installerar och anv\u00e4nder CKEditor i Laravel"},"content":{"rendered":"

Vill du installera CKEditor i Laravel? CKEditor \u00e4r en WYSIWYG (det du ser \u00e4r vad du f\u00e5r) HTML-redigerare som l\u00e5ter oss skriva rikt textformat. I den h\u00e4r artikeln visar jag dig hur du installerar och anv\u00e4nder CKEditor i Laravel<\/strong>.<\/p>\n

Varf\u00f6r beh\u00f6ver du anv\u00e4nda CKEditor?<\/h3>\n

Richtext-redigeraren \u00e4r n\u00f6dv\u00e4ndig f\u00f6r att skriva rikt inneh\u00e5ll f\u00f6r dina sidor eller artiklar. P\u00e5 webbsidan m\u00e5ste vi ha olika element som bilder, stycken, l\u00e4nkar etc. Alla dessa olika element kan l\u00e4ggas till med CKEditor.<\/p>\n

HTML ger ett textareaelement f\u00f6r att skriva beskrivning. Men det kommer med begr\u00e4nsningar. I textomr\u00e5det \u00e4r det inte l\u00e4tt och anv\u00e4ndarv\u00e4nligt att skriva andra HTML-element som p, div, img, etc.<\/p>\n

F\u00f6r att \u00f6vervinna s\u00e5dana begr\u00e4nsningar kan du anv\u00e4nda CKEditor som i sig \u00e4r en textredigerare. V\u00e5r slutredakt\u00f6r kommer att se ut som nedanst\u00e5ende sk\u00e4rmdump.<\/p>\n

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

Installera CKEditor i Laravel<\/h3>\n

Det finns tv\u00e5 s\u00e4tt att installera CKEditor i Laravel – CDN eller CKEditor-paketet. Du kan f\u00e5 b\u00e5da resurserna fr\u00e5n deras nedladdningssida<\/a>.<\/p>\n

CDN-l\u00e4nken \u00e4r \/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js<\/code>. Om du v\u00e4ljer CDN beh\u00f6ver du inte ladda ner n\u00e5got fr\u00e5n CKEditors webbplats.<\/p>\n

Om du t\u00e4nker installera det utan CDN laddar du ner paketet (standardpaket rekommenderas). Skapa sedan en mapp ’ckeditor’ under katalogen ’public’ f\u00f6r ditt Laravel-projekt. Och inuti denna "ckeditor" -mapp kopierar du nedan filer och mappar fr\u00e5n det nedladdade paketet.<\/p>\n

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

Hur man anv\u00e4nder CKEditor<\/h3>\n

I detta skede har du slutf\u00f6rt stegen f\u00f6r installation av CKEditor-paketet. L\u00e5t oss nu se hur man anv\u00e4nder CKEditor.<\/p>\n

L\u00e5t oss s\u00e4ga att du har ett "textomr\u00e5de" som b\u00f6r ers\u00e4ttas av CKEditor. F\u00f6r att g\u00f6ra det l\u00e4gger jag till id ’sammanfattning-ckeditor’ till ’textomr\u00e5det’.<\/p>\n

<textarea class=\"form-control\" id=\"summary-ckeditor\" name=\"summary-ckeditor\"><\/textarea><\/code><\/pre>\n
D\u00e4refter m\u00e5ste du inkludera ckeditor.js<\/code>filen och skriva en JavaScript-kod som ers\u00e4tter ’textarea’ med CKEditor.<\/p>\n
<script src=\"{{ asset('ckeditor\/ckeditor.js') }}\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
Ovanf\u00f6r JavaScript-kod ers\u00e4tts textarea med CKEditor. Om du vill anv\u00e4nda CDN skulle ovanst\u00e5ende kod vara som f\u00f6ljer:<\/p>\n
<script src=\"\/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
K\u00f6r din sida i webbl\u00e4saren och du ska nu kunna se CKeditor. Du kan nu l\u00e4gga till ditt inneh\u00e5ll i redigeraren och anv\u00e4nda det p\u00e5 din webbplats.<\/p>\n
Ladda upp och infoga bild i CKEditor<\/h3>\n
CKEditor ger som standard inte m\u00f6jlighet att ladda upp bilden. Om n\u00e5gon vill ge det h\u00e4r alternativet, forts\u00e4tt l\u00e4sa den h\u00e4r artikeln. Det m\u00e5ste l\u00e4gga till en Laravel-rutt, skriva en kod f\u00f6r bilduppladdning och lite JavaScript till din applikation. F\u00f6rst m\u00e5ste du ringa CKEditor f\u00f6r att aktivera alternativet f\u00f6r bild\u00f6verf\u00f6ring p\u00e5 f\u00f6ljande s\u00e4tt.<\/p>\n
<script>\nCKEDITOR.replace( 'summary-ckeditor', {\n\u00a0\u00a0\u00a0\u00a0filebrowserUploadUrl: \"{{route('upload', ['_token' => csrf_token() ])}}\",\n\u00a0\u00a0\u00a0\u00a0filebrowserUploadMethod: 'form'\n});\n<\/script><\/code><\/pre>\n
H\u00e4r f\u00f6r nyckeln filebrowserUploadUrl<\/code>passerade jag rutt-URL och csrf-token. L\u00e5t oss definiera rutten "ladda upp".<\/p>\n
Route::post('ckeditor\/image_upload', 'CKEditorController@upload')->name('upload');<\/code><\/pre>\n
Ladda om sidan. Nu om du klickar p\u00e5 CKEditors bildikon kommer du att se alternativet f\u00f6r bilduppladdning som visas nedan.<\/p>\n
\"Hur<\/a><\/p>\n
F\u00f6r att kunna anv\u00e4nda den uppladdade bilden i CKEditor m\u00e5ste du ladda upp bilden i din applikationsmapp och skicka tillbaka en bild-URL. F\u00f6r att lagra en bild p\u00e5 en server anv\u00e4nder jag Laravel-lagringsfunktionen. S\u00e5 f\u00f6rst m\u00e5ste jag skapa en syml\u00e4nk till en "lagringsmapp". K\u00f6r kommandot nedan f\u00f6r att skapa en symlink:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
V\u00e5r rutt "ladda upp" karta med uppladdningsmetoden f\u00f6r CKEditorController<\/code>. S\u00e5 skapa en styrenhet CKEditorController<\/code>och definiera upload<\/code>metod i den enligt f\u00f6ljande:<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\n\u00a0\nclass CKEditorController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0public function upload(Request $request)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($request->hasFile('upload')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('upload')->getClientOriginalName();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('upload')->getClientOriginalExtension();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('upload')->storeAs('public\/uploads', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$CKEditorFuncNum = $request->input('CKEditorFuncNum');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$url = asset('storage\/uploads\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$msg = 'Image successfully uploaded';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$re = \"<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')<\/script>\";\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Render HTML output\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@header('Content-type: text\/html; charset=utf-8');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $re;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Det \u00e4r det nu, f\u00f6rs\u00f6k ladda upp bilden fr\u00e5n CKEditors inbyggda bildalternativ s\u00e5 f\u00e5r du bilden tillagd i din redigerare.<\/p>\n
Jag hoppas att du f\u00f6rst\u00e5r hur du installerar och anv\u00e4nder CKEditor i Laravel. Dela dina tankar och f\u00f6rslag i kommentaren nedan.<\/p>\n
relaterade artiklar<\/h4>\n