{"id":24729,"date":"2021-05-20T11:07:00","date_gmt":"2021-05-20T08:07:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24729"},"modified":"2021-10-18T03:12:01","modified_gmt":"2021-10-18T00:12:01","slug":"come-installare-e-utilizzare-ckeditor-in-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-installare-e-utilizzare-ckeditor-in-laravel\/","title":{"rendered":"Come installare e utilizzare CKEditor in Laravel"},"content":{"rendered":"

Vuoi installare CKEditor in Laravel? CKEditor \u00e8 un editor HTML WYSIWYG (quello che vedi \u00e8 quello che ottieni) che ci permette di scrivere formati rich text. In questo articolo, ti mostro come installare e utilizzare CKEditor in Laravel<\/strong>.<\/p>\n

Perch\u00e9 \u00e8 necessario utilizzare CKEditor?<\/h3>\n

Il rich text editor \u00e8 necessario per scrivere contenuti ricchi per le tue pagine o articoli. Nella pagina web, abbiamo bisogno di diversi elementi come immagini, paragrafi, collegamenti, ecc. Tutti questi diversi elementi possono essere aggiunti utilizzando CKEditor.<\/p>\n

L’HTML fornisce un elemento textarea per scrivere la descrizione. Ma viene fornito con limitazioni. In textarea, non \u00e8 facile e intuitivo scrivere altri elementi HTML come p, div, img, ecc.<\/p>\n

Per superare tali limitazioni, puoi utilizzare CKEditor che \u00e8 di per s\u00e9 un editor di testo ricco. Il nostro editor finale assomiglier\u00e0 allo screenshot qui sotto.<\/p>\n

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

Installa CKEditor in Laravel<\/h3>\n

Ci sono 2 modi per installare CKEditor in Laravel: CDN o pacchetto CKEditor. Puoi ottenere entrambe le risorse dalla loro pagina di download<\/a>.<\/p>\n

Il collegamento CDN \u00e8 \/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js<\/code>. Se scegli CDN non devi scaricare nulla dal sito web di CKEditor.<\/p>\n

Se intendi installarlo senza CDN, scarica il pacchetto (consigliato il pacchetto standard). Quindi, crea una cartella "ckeditor" nella directory "public" del tuo progetto Laravel. E all’interno di questa cartella ‘ckeditor’ copia sotto i file e le cartelle dal pacchetto scaricato.<\/p>\n

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

Come usare CKEditor<\/h3>\n

A questo punto, hai completato i passaggi per l’installazione del pacchetto CKEditor. Ora vediamo come usare il CKEditor.<\/p>\n

Supponiamo che tu abbia una ‘textarea’ che dovrebbe essere sostituita da CKEditor. Per farlo aggiungo id ‘summary-ckeditor’ alla ‘textarea’.<\/p>\n

<textarea class=\"form-control\" id=\"summary-ckeditor\" name=\"summary-ckeditor\"><\/textarea><\/code><\/pre>\n
Successivamente, \u00e8 necessario includere il ckeditor.js<\/code>file e scrivere un codice JavaScript che sostituisca ‘textarea’ con CKEditor.<\/p>\n
<script src=\"{{ asset('ckeditor\/ckeditor.js') }}\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
Il codice JavaScript sopra sostituisce textarea con CKEditor. Se vuoi usare CDN, il codice sopra sarebbe il seguente:<\/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
Esegui la tua pagina sul browser e ora dovresti essere in grado di vedere il CKeditor. Ora puoi aggiungere i tuoi contenuti all’editor e utilizzarli sul tuo sito web.<\/p>\n
Carica e inserisci immagine in CKEditor<\/h3>\n
CKEditor per impostazione predefinita non offre la possibilit\u00e0 di caricare l’immagine. Se qualcuno sta cercando di dare questa opzione, continua a leggere questo articolo. Deve aggiungere un percorso Laravel, scrivere un codice per il caricamento dell’immagine e alcuni JavaScript alla tua applicazione. Innanzitutto, per abilitare l’opzione di caricamento dell’immagine \u00e8 necessario chiamare CKEditor nel modo seguente.<\/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
Qui per la chiave filebrowserUploadUrl<\/code>ho passato l’URL del percorso e il token csrf. Definiamo il percorso ‘upload’.<\/p>\n
Route::post('ckeditor\/image_upload', 'CKEditorController@upload')->name('upload');<\/code><\/pre>\n
Ricarica la pagina. Ora se fai clic sull’icona dell’immagine di CKEditor vedrai l’opzione di caricamento dell’immagine come mostrato di seguito.<\/p>\n
\"Come<\/a><\/p>\n
Per utilizzare l’immagine caricata in CKEditor, \u00e8 necessario caricare l’immagine nella cartella dell’applicazione e inviare un URL dell’immagine. Per archiviare un’immagine su un server, utilizzer\u00f2 la funzione di archiviazione di Laravel. Quindi prima ho bisogno di creare un collegamento simbolico di una cartella di "archiviazione". Esegui il comando seguente per creare un collegamento simbolico:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Il nostro percorso ‘carica’ la mappa con il metodo di caricamento di CKEditorController<\/code>. Quindi crea un controller CKEditorController<\/code>e definisci il upload<\/code>metodo in esso come segue:<\/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
Ora prova a caricare l’immagine dall’opzione immagine incorporata di CKEditor e otterrai l’immagine aggiunta nel tuo editor.<\/p>\n
Spero che tu capisca come installare e usare CKEditor in Laravel. Per favore condividi i tuoi pensieri e suggerimenti nel commento qui sotto.<\/p>\n
articoli Correlati<\/h4>\n