{"id":24530,"date":"2021-05-20T10:44:00","date_gmt":"2021-05-20T07:44:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24530"},"modified":"2021-10-17T20:48:15","modified_gmt":"2021-10-17T17:48:15","slug":"kuinka-asentaa-ja-kayttaa-ckeditoria-laravelissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-asentaa-ja-kayttaa-ckeditoria-laravelissa\/","title":{"rendered":"Kuinka asentaa ja k\u00e4ytt\u00e4\u00e4 CKEditoria Laravelissa"},"content":{"rendered":"

Haluatko asentaa CKEditorin Laraveliin? CKEditor on WYSIWYG (mit\u00e4 n\u00e4et on mit\u00e4 saat) HTML-editori, jonka avulla voimme kirjoittaa rikkaan tekstin muotoja. T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n sinulle, kuinka CKEditor asennetaan ja k\u00e4ytet\u00e4\u00e4n Laravelissa<\/strong>.<\/p>\n

Miksi CKEditoria on k\u00e4ytett\u00e4v\u00e4?<\/h3>\n

Rich text -editori on v\u00e4ltt\u00e4m\u00e4t\u00f6n, jos haluat kirjoittaa rikas sis\u00e4lt\u00f6\u00e4 sivuillesi tai artikkelisi. Verkkosivulla meill\u00e4 on oltava erilaisia \u200b\u200belementtej\u00e4, kuten kuvia, kappaleita, linkkej\u00e4 jne. Kaikki n\u00e4m\u00e4 eri elementit voidaan lis\u00e4t\u00e4 CKEditorilla.<\/p>\n

HTML tarjoaa tekstialue-elementin kuvauksen kirjoittamiseen. Mutta siihen liittyy rajoituksia. Textarealla ei ole helppoa ja k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llist\u00e4 kirjoittaa muita HTML-elementtej\u00e4, kuten p, div, img jne.<\/p>\n

Voit voittaa t\u00e4llaiset rajoitukset k\u00e4ytt\u00e4m\u00e4ll\u00e4 CKEditoria, joka itsess\u00e4\u00e4n on rikas tekstieditori. Lopullinen editorimme n\u00e4ytt\u00e4\u00e4 alla olevalta kuvakaappaukselta.<\/p>\n

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

Asenna CKEditor Laraveliin<\/h3>\n

CKEditor voidaan asentaa Laraveliin kahdella tavalla – CDN- tai CKEditor-paketti. Voit saada molemmat resurssit niiden lataussivulta<\/a>.<\/p>\n

CDN-linkki on \/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js<\/code>. Jos valitset CDN: n, sinun ei tarvitse ladata mit\u00e4\u00e4n CKEditor-verkkosivustolta.<\/p>\n

Jos aiot asentaa sen ilman CDN: \u00e4\u00e4, lataa paketti (suosittelemme Standard Package). Luo seuraavaksi kansio ’ckeditor’ Laravel-projektisi julkisen hakemiston alle. Ja kopioi t\u00e4m\u00e4n ’ckeditor’ -kansion sis\u00e4ll\u00e4 tiedostot ja kansiot ladatun paketin alle.<\/p>\n

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

Kuinka k\u00e4ytt\u00e4\u00e4 CKEditoria<\/h3>\n

T\u00e4ss\u00e4 vaiheessa olet suorittanut CKEditor-paketin asentamisen vaiheet. Katsotaan nyt, miten CKEditoria k\u00e4ytet\u00e4\u00e4n.<\/p>\n

Oletetaan, ett\u00e4 sinulla on ’textarea’, jonka pit\u00e4isi korvata CKEditorilla. Voit tehd\u00e4 niin lis\u00e4\u00e4m\u00e4ll\u00e4 tunnus "summary-ckeditor" "textareaan".<\/p>\n

<textarea class=\"form-control\" id=\"summary-ckeditor\" name=\"summary-ckeditor\"><\/textarea><\/code><\/pre>\n
Seuraavaksi sinun on sis\u00e4llytett\u00e4v\u00e4 ckeditor.js<\/code>tiedosto ja kirjoitettava JavaScript-koodi, joka korvaa ’textarea’ CKEditorilla.<\/p>\n
<script src=\"{{ asset('ckeditor\/ckeditor.js') }}\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
Yll\u00e4 oleva JavaScript-koodi korvaa teksti-alueen CKEditorilla. Jos haluat k\u00e4ytt\u00e4\u00e4 CDN: \u00e4\u00e4, yll\u00e4 oleva koodi olisi seuraava:<\/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
Suorita sivusi selaimella ja sinun pit\u00e4isi nyt n\u00e4hd\u00e4 CKeditor. Voit nyt lis\u00e4t\u00e4 sis\u00e4lt\u00f6si editoriin ja k\u00e4ytt\u00e4\u00e4 sit\u00e4 verkkosivustollasi.<\/p>\n
L\u00e4het\u00e4 ja lis\u00e4\u00e4 kuva CKEditoriin<\/h3>\n
CKEditor ei oletusarvoisesti anna mahdollisuutta ladata kuvaa. Jos joku haluaa antaa t\u00e4m\u00e4n vaihtoehdon, jatka t\u00e4m\u00e4n artikkelin lukemista. Sen on lis\u00e4tt\u00e4v\u00e4 Laravel-reitti, kirjoitettava koodi kuvien lataamista varten ja JavaScripti sovellukseesi. Ensinn\u00e4kin, jotta voit ladata kuvan, sinun on soitettava CKEditorille seuraavalla tavalla.<\/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
T\u00e4ss\u00e4 avaimelle filebrowserUploadUrl<\/code>ohitin reitin URL-osoitteen ja csrf-tunnuksen. M\u00e4\u00e4ritet\u00e4\u00e4n reitti ’lataa’.<\/p>\n
Route::post('ckeditor\/image_upload', 'CKEditorController@upload')->name('upload');<\/code><\/pre>\n
Lataa sivu uudelleen. Nyt kun napsautat CKEditorin kuvaketta, n\u00e4et kuvan latausvaihtoehdon alla olevan kuvan mukaisesti.<\/p>\n
\"Kuinka<\/a><\/p>\n
Jotta voit k\u00e4ytt\u00e4\u00e4 ladattua kuvaa CKEditorissa, sinun on ladattava kuva sovelluskansioon ja l\u00e4hetett\u00e4v\u00e4 takaisin kuvan URL-osoite. Kuvan tallentamiseen palvelimelle k\u00e4yt\u00e4n Laravel-tallennusominaisuutta. Joten minun on ensin luotava symboli "tallennuskansiosta". Luo symboli suorittamalla alla oleva komento:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Reittimme "lataa" kartta, jonka latausmenetelm\u00e4 on CKEditorController<\/code>. Luo siis ohjain CKEditorController<\/code>ja m\u00e4\u00e4rit\u00e4 siin\u00e4 upload<\/code>menetelm\u00e4 seuraavasti:<\/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
Se on se, ett\u00e4 yrit\u00e4t nyt ladata kuvan CKEditorin sis\u00e4\u00e4nrakennetusta kuvavaihtoehdosta ja saat kuvan lis\u00e4tty\u00e4 editoriisi.<\/p>\n
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t CKEditorin asentamisen ja k\u00e4yt\u00f6n Laravelissa. Ole hyv\u00e4 ja jaa ajatuksiasi ja ehdotuksiasi alla olevassa kommentissa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n