{"id":28116,"date":"2021-05-20T10:53:00","date_gmt":"2021-05-20T07:53:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28116"},"modified":"2021-10-18T03:43:36","modified_gmt":"2021-10-18T00:43:36","slug":"jak-zainstalowac-i-uzywac-ckeditor-w-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-zainstalowac-i-uzywac-ckeditor-w-laravel\/","title":{"rendered":"Jak zainstalowa\u0107 i u\u017cywa\u0107 CKEditor w Laravel?"},"content":{"rendered":"

Czy chcesz zainstalowa\u0107 CKEditor w Laravel? CKEditor to edytor HTML typu WYSIWYG (to, co widzisz, otrzymujesz), kt\u00f3ry pozwala nam pisa\u0107 formaty tekstu sformatowanego. W tym artykule poka\u017c\u0119 jak zainstalowa\u0107 i u\u017cywa\u0107 CKEditor w Laravelu<\/strong>.<\/p>\n

Dlaczego warto korzysta\u0107 z CKEditora?<\/h3>\n

Edytor tekstu sformatowanego jest niezb\u0119dny do pisania bogatej zawarto\u015bci stron lub artyku\u0142\u00f3w. Na stronie internetowej musimy mie\u0107 r\u00f3\u017cne elementy, takie jak obrazy, akapity, linki itp. Wszystkie te r\u00f3\u017cne elementy mo\u017cna doda\u0107 za pomoc\u0105 CKEditor.<\/p>\n

HTML dostarcza element textarea do pisania opisu. Ale ma ograniczenia. W textarea pisanie innych element\u00f3w HTML, takich jak p, div, img itp., nie jest \u0142atwe i przyjazne dla u\u017cytkownika.<\/p>\n

Aby przezwyci\u0119\u017cy\u0107 takie ograniczenia, mo\u017cesz u\u017cy\u0107 CKEditor, kt\u00f3ry sam w sobie jest edytorem tekstu sformatowanego. Nasz ostateczny edytor b\u0119dzie wygl\u0105da\u0142 jak na poni\u017cszym zrzucie ekranu.<\/p>\n

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

Zainstaluj CKEditor w Laravel<\/h3>\n

Istniej\u0105 2 sposoby instalacji CKEditor w Laravel \u2013 CDN lub pakiet CKEditor. Oba zasoby mo\u017cna pobra\u0107 z ich strony pobierania<\/a>.<\/p>\n

Link CDN to \/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js<\/code>. Je\u015bli wybierzesz CDN, nie musisz niczego pobiera\u0107 ze strony CKEditor.<\/p>\n

Je\u015bli zamierzasz zainstalowa\u0107 go bez CDN, pobierz pakiet (zalecany pakiet standardowy). Nast\u0119pnie utw\u00f3rz folder 'ckeditor’ w katalogu 'public’ swojego projektu Laravel. A wewn\u0105trz tego folderu 'ckeditor’ skopiuj poni\u017cej pliki i foldery z pobranego pakietu.<\/p>\n

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

Jak korzysta\u0107 z CKEditora<\/h3>\n

Na tym etapie zako\u0144czy\u0142e\u015b kroki instalacji pakietu CKEditor. Zobaczmy teraz, jak korzysta\u0107 z CKEditor.<\/p>\n

Powiedzmy, \u017ce masz obszar tekstowy, kt\u00f3ry powinien zosta\u0107 zast\u0105piony przez CKEditor. Aby to zrobi\u0107, dodaj\u0119 id \u201esummary-ckeditor" do \u201etextarea”.<\/p>\n

<textarea class=\"form-control\" id=\"summary-ckeditor\" name=\"summary-ckeditor\"><\/textarea><\/code><\/pre>\n
Nast\u0119pnie musisz do\u0142\u0105czy\u0107 ckeditor.js<\/code>plik i napisa\u0107 kod JavaScript, kt\u00f3ry zamieni 'textarea’ na CKEditor.<\/p>\n
<script src=\"{{ asset('ckeditor\/ckeditor.js') }}\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
Powy\u017cszy kod JavaScript zast\u0119puje textarea CKEditorem. Je\u015bli chcesz korzysta\u0107 z CDN, powy\u017cszy kod b\u0119dzie wygl\u0105da\u0142 nast\u0119puj\u0105co:<\/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
Uruchom swoj\u0105 stron\u0119 w przegl\u0105darce i powiniene\u015b teraz widzie\u0107 CKeditor. Mo\u017cesz teraz dodawa\u0107 swoje tre\u015bci do edytora i u\u017cywa\u0107 ich na swojej stronie internetowej.<\/p>\n
Prze\u015blij i wstaw obraz w CKEditor<\/h3>\n
CKEditor domy\u015blnie nie daje mo\u017cliwo\u015bci wgrania obrazu. Je\u015bli kto\u015b chce da\u0107 t\u0119 opcj\u0119, czytaj dalej ten artyku\u0142. Musi doda\u0107 tras\u0119 Laravel, napisa\u0107 kod do przes\u0142ania obrazu i troch\u0119 JavaScriptu do twojej aplikacji. Po pierwsze, aby w\u0142\u0105czy\u0107 opcj\u0119 przesy\u0142ania obrazu, musisz wywo\u0142a\u0107 CKEditor w nast\u0119puj\u0105cy spos\u00f3b.<\/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
Tutaj dla klucza filebrowserUploadUrl<\/code>przekaza\u0142em adres URL trasy i token csrf. Zdefiniujmy tras\u0119 \u201eprze\u015blij”.<\/p>\n
Route::post('ckeditor\/image_upload', 'CKEditorController@upload')->name('upload');<\/code><\/pre>\n
Od\u015bwie\u017c stron\u0119. Teraz, je\u015bli klikniesz na ikon\u0119 obrazu CKEditor, zobaczysz opcj\u0119 przesy\u0142ania obrazu, jak pokazano poni\u017cej.<\/p>\n
\"Jak<\/a><\/p>\n
Aby u\u017cy\u0107 przes\u0142anego obrazu w CKEditor, musisz wgra\u0107 obraz do folderu aplikacji i odes\u0142a\u0107 adres URL obrazu. Do przechowywania obrazu na serwerze u\u017cyj\u0119 funkcji przechowywania Laravel. Wi\u0119c najpierw musz\u0119 utworzy\u0107 dowi\u0105zanie symboliczne folderu 'storage’. Uruchom poni\u017csze polecenie, aby utworzy\u0107 dowi\u0105zanie symboliczne:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Nasza mapa trasy \u201eprze\u015blij” z metod\u0105 przesy\u0142ania CKEditorController<\/code>. Stw\u00f3rz wi\u0119c kontroler CKEditorController<\/code>i zdefiniuj upload<\/code>w nim metod\u0119 w nast\u0119puj\u0105cy spos\u00f3b:<\/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
To wszystko, teraz spr\u00f3buj przes\u0142a\u0107 obraz z wbudowanej opcji obrazu w CKEditor, a obraz zostanie dodany do edytora.<\/p>\n
Mam nadziej\u0119, \u017ce rozumiesz, jak zainstalowa\u0107 i u\u017cywa\u0107 CKEditor w Laravel. Podziel si\u0119 swoimi przemy\u015bleniami i sugestiami w poni\u017cszym komentarzu.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n