Hur man installerar och använder CKEditor i Laravel
Vill du installera CKEditor i Laravel? CKEditor är en WYSIWYG (det du ser är vad du får) HTML-redigerare som låter oss skriva rikt textformat. I den här artikeln visar jag dig hur du installerar och använder CKEditor i Laravel.
Varför behöver du använda CKEditor?
Richtext-redigeraren är nödvändig för att skriva rikt innehåll för dina sidor eller artiklar. På webbsidan måste vi ha olika element som bilder, stycken, länkar etc. Alla dessa olika element kan läggas till med CKEditor.
HTML ger ett textareaelement för att skriva beskrivning. Men det kommer med begränsningar. I textområdet är det inte lätt och användarvänligt att skriva andra HTML-element som p, div, img, etc.
För att övervinna sådana begränsningar kan du använda CKEditor som i sig är en textredigerare. Vår slutredaktör kommer att se ut som nedanstående skärmdump.
Installera CKEditor i Laravel
Det finns två sätt att installera CKEditor i Laravel – CDN eller CKEditor-paketet. Du kan få båda resurserna från deras nedladdningssida.
CDN-länken är //cdn.ckeditor.com/4.14.0/standard/ckeditor.js. Om du väljer CDN behöver du inte ladda ner något från CKEditors webbplats.
Om du tänker installera det utan CDN laddar du ner paketet (standardpaket rekommenderas). Skapa sedan en mapp ‘ckeditor’ under katalogen ‘public’ för ditt Laravel-projekt. Och inuti denna "ckeditor" -mapp kopierar du nedan filer och mappar från det nedladdade paketet.
Hur man använder CKEditor
I detta skede har du slutfört stegen för installation av CKEditor-paketet. Låt oss nu se hur man använder CKEditor.
Låt oss säga att du har ett "textområde" som bör ersättas av CKEditor. För att göra det lägger jag till id ‘sammanfattning-ckeditor’ till ‘textområdet’.
<textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor"></textarea>Därefter måste du inkludera ckeditor.jsfilen och skriva en JavaScript-kod som ersätter ‘textarea’ med CKEditor.
<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>Ovanför JavaScript-kod ersätts textarea med CKEditor. Om du vill använda CDN skulle ovanstående kod vara som följer:
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>Kör din sida i webbläsaren och du ska nu kunna se CKeditor. Du kan nu lägga till ditt innehåll i redigeraren och använda det på din webbplats.
Ladda upp och infoga bild i CKEditor
CKEditor ger som standard inte möjlighet att ladda upp bilden. Om någon vill ge det här alternativet, fortsätt läsa den här artikeln. Det måste lägga till en Laravel-rutt, skriva en kod för bilduppladdning och lite JavaScript till din applikation. Först måste du ringa CKEditor för att aktivera alternativet för bildöverföring på följande sätt.
<script>
CKEDITOR.replace( 'summary-ckeditor', {
filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
filebrowserUploadMethod: 'form'
});
</script>Här för nyckeln filebrowserUploadUrlpasserade jag rutt-URL och csrf-token. Låt oss definiera rutten "ladda upp".
Route::post('ckeditor/image_upload', 'CKEditorController@upload')->name('upload');Ladda om sidan. Nu om du klickar på CKEditors bildikon kommer du att se alternativet för bilduppladdning som visas nedan.
För att kunna använda den uppladdade bilden i CKEditor måste du ladda upp bilden i din applikationsmapp och skicka tillbaka en bild-URL. För att lagra en bild på en server använder jag Laravel-lagringsfunktionen. Så först måste jag skapa en symlänk till en "lagringsmapp". Kör kommandot nedan för att skapa en symlink:
php artisan storage:linkVår rutt "ladda upp" karta med uppladdningsmetoden för CKEditorController. Så skapa en styrenhet CKEditorControlleroch definiera uploadmetod i den enligt följande:
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class CKEditorController extends Controller
{
public function upload(Request $request)
{
if($request->hasFile('upload')) {
//get filename with extension
$filenamewithextension = $request->file('upload')->getClientOriginalName();
//get filename without extension
$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
//get file extension
$extension = $request->file('upload')->getClientOriginalExtension();
//filename to store
$filenametostore = $filename.'_'.time().'.'.$extension;
//Upload File
$request->file('upload')->storeAs('public/uploads', $filenametostore);
$CKEditorFuncNum = $request->input('CKEditorFuncNum');
$url = asset('storage/uploads/'.$filenametostore);
$msg = 'Image successfully uploaded';
$re = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
// Render HTML output
@header('Content-type: text/html; charset=utf-8');
echo $re;
}
}
}Det är det nu, försök ladda upp bilden från CKEditors inbyggda bildalternativ så får du bilden tillagd i din redigerare.
Jag hoppas att du förstår hur du installerar och använder CKEditor i Laravel. Dela dina tankar och förslag i kommentaren nedan.