{"id":24881,"date":"2021-05-20T11:18:00","date_gmt":"2021-05-20T08:18:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24881"},"modified":"2021-10-17T19:01:51","modified_gmt":"2021-10-17T16:01:51","slug":"kuidas-ckeditorit-laravelis-installida-ja-kasutada","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-ckeditorit-laravelis-installida-ja-kasutada\/","title":{"rendered":"Kuidas CKEditorit Laravelis installida ja kasutada"},"content":{"rendered":"

Kas soovite CKEditori Laraveli installida? CKEditor on WYSIWYG (mida n\u00e4ete, see on see, mida saate) HTML-redaktor, mis v\u00f5imaldab meil kirjutada rikka teksti vorminguid. Selles artiklis n\u00e4itan teile, kuidas CKEditorit Laravelis installida ja kasutada<\/strong>.<\/p>\n

Miks on vaja kasutada CKEditorit?<\/h3>\n

Rikasteksti redaktor on vajalik lehtede v\u00f5i artiklite rikkaliku sisu kirjutamiseks. Veebilehel peavad meil olema erinevad elemendid, nagu pildid, l\u00f5igud, lingid jne. K\u00f5iki neid erinevaid elemente saab lisada CKEditori abil.<\/p>\n

HTML pakub kirjelduse kirjutamiseks tekstiala elemendi. Kuid sellega kaasnevad piirangud. Textareas pole teiste HTML-elementide, n\u00e4iteks p, div, img jne, kirjutamine lihtne ja kasutajas\u00f5bralik.<\/p>\n

Selliste piirangute \u00fcletamiseks v\u00f5ite kasutada CKEditorit, mis ise on rikas tekstiredaktor. Meie viimane redaktor n\u00e4eb v\u00e4lja nagu j\u00e4rgmine ekraanipilt.<\/p>\n

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

Installige CKEditor Laraveli<\/h3>\n

CKEditori installimiseks Laraveli on kaks v\u00f5imalust – CDN v\u00f5i CKEditor pakett. M\u00f5lemad ressursid leiate nende allalaadimislehelt<\/a>.<\/p>\n

CDN link on \/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js<\/code>. Kui kasutate CDN-i, ei pea te CKEditori veebisaidilt midagi alla laadima.<\/p>\n

Kui kavatsete selle installida ilma CDN-iga, laadige pakett alla (soovitatav on Standard Package). J\u00e4rgmisena looge oma Laraveli projekti kataloogi ‘public’ alla kaust ‘ckeditor’. Ja selle kausta "ckeditor" all kopeerige allalaaditud paketist failid ja kaustad.<\/p>\n

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

Kuidas CKEditorit kasutada<\/h3>\n

Selles etapis olete CKEditori paketi installimise etapid l\u00f5pule viinud. N\u00fc\u00fcd vaatame, kuidas CKEditorit kasutada.<\/p>\n

Oletame, et teil on ‘textarea’, mille peaks asendama CKEditor. Selleks lisan tekstialasse id ‘summary-ckeditor’.<\/p>\n

<textarea class=\"form-control\" id=\"summary-ckeditor\" name=\"summary-ckeditor\"><\/textarea><\/code><\/pre>\n
J\u00e4rgmisena peate lisama ckeditor.js<\/code>faili ja kirjutama JavaScripti koodi, mis asendab ‘textarea’ CKEditoriga.<\/p>\n
<script src=\"{{ asset('ckeditor\/ckeditor.js') }}\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
JavaScripti koodi kohal asendab tekstiala CKEditoriga. Kui soovite kasutada CDN-i, on \u00fclaltoodud kood j\u00e4rgmine:<\/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\u00e4ivitage oma leht brauseris ja peaksite n\u00fc\u00fcd CKeditorit n\u00e4gema. N\u00fc\u00fcd saate oma sisu redaktorisse lisada ja seda oma veebisaidil kasutada.<\/p>\n
Laadige pilt \u00fcles ja sisestage CKEditori<\/h3>\n
CKEditor ei anna vaikimisi v\u00f5imalust pilti \u00fcles laadida. Kui keegi soovib seda v\u00f5imalust anda, lugege seda artiklit edasi. See peab lisama oma rakendusele Laraveli marsruudi, kirjutama pildi \u00fcleslaadimise koodi ja JavaScripti. Esiteks peate pildi \u00fcleslaadimise v\u00f5imaluse lubamiseks helistama CKEditorile j\u00e4rgmisel viisil.<\/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
Siinkohal filebrowserUploadUrl<\/code>edastasin v\u00f5tme jaoks marsruudi URL-i ja csrf-m\u00e4rgi. M\u00e4\u00e4ratleme marsruudi ‘\u00fcleslaadimine’.<\/p>\n
Route::post('ckeditor\/image_upload', 'CKEditorController@upload')->name('upload');<\/code><\/pre>\n
Laadige leht uuesti. Kui kl\u00f5psate CKEditori pildiikoonil, n\u00e4ete pildi \u00fcleslaadimise v\u00f5imalust, nagu allpool n\u00e4idatud.<\/p>\n
\"Kuidas<\/a><\/p>\n
CKEditoris \u00fcleslaaditud pildi kasutamiseks peate pildi \u00fcles laadima oma rakenduste kausta ja saatma tagasi pildi URL-i. Kujutise serverisse salvestamiseks kasutan Laraveli salvestusfunktsiooni. Nii et k\u00f5igepealt pean looma kausta \u201eladustamine” s\u00fcmboli. S\u00fcmbolilingi loomiseks k\u00e4ivitage j\u00e4rgmine k\u00e4sk:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Meie marsruudi "\u00fcleslaadimise" kaart \u00fcleslaadimismeetodiga CKEditorController<\/code>. Nii et looge kontroller CKEditorController<\/code>ja m\u00e4\u00e4rake selles upload<\/code>meetod j\u00e4rgmiselt:<\/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
See on see, et proovige n\u00fc\u00fcd pilt \u00fcles laadida CKEditori sisseehitatud pildivalikust ja saate pildi oma redaktorisse.<\/p>\n
Loodan, et saate aru, kuidas CKEditorit Laravelis installida ja kasutada. Palun jagage oma m\u00f5tteid ja ettepanekuid allolevas kommentaaris.<\/p>\n
seotud artiklid<\/h4>\n