Hi, today we are going to learn Laravel 10 CKeditor Image Upload Example. Laravel is one of the most popular PHP frameworks that is widely used for building web applications. It offers a robust set of features and tools that make it easy to create complex web applications quickly.
One of the most popular features of Laravel is its built-in support for CKEditor, a powerful WYSIWYG editor that allows users to create and edit content in a visual way. In this blog post, we will explore how to use CKEditor in Laravel 10 and upload images to it.
Steps for Laravel 10 CKeditor Image Upload Example
- Step 1: Install Laravel 10
- Step 2: Install CKEditor
- Step 3: Create a Route and a View
- Step 4: Install CKFinder
- Step 5: Configure CKFinder
- Step 6: Test the Image Upload
- Conclusion
Step 1: Install Laravel 10
The first step is to install Laravel 10 using Composer. You can install Composer by visiting the official website and following the installation instructions. Once you have installed Composer, open your terminal and run the following command to create a new Laravel project:
composer create-project laravel/laravel laravel-ckeditor-image-upload
This will create a new Laravel project named laravel-ckeditor-image-upload
.
Step 2: Install CKEditor
Next, we need to install CKEditor in our Laravel project. We can do this using the CKEditor CDN. Open the app.blade.php
file located in resources/views/layouts
and add the following code in the head
section:
<head>
<!-- ... -->
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
</head>
This will load the CKEditor script in our application.
Step 3: Create a Route and a View
Next, we need to create a route that will load the CKEditor. Open the web.php
file located in routes
and add the following code:
Route::get('/ckeditor', function () {
return view('ckeditor');
});
This will create a route named /ckeditor
that will load a view named ckeditor.blade.php
.
Next, create a new file named ckeditor.blade.php
in the resources/views
directory and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>CKEditor Image Upload Example</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
</head>
<body>
<h1>CKEditor Image Upload Example - LaravelTuts.com</h1>
<form>
<textarea name="editor"></textarea>
</form>
<script>
ClassicEditor
.create( document.querySelector( 'textarea[name="editor"]' ), {
ckfinder: {
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json',
},
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
This will create a form with a CKEditor instance that will allow us to upload images.
Step 4: Install CKFinder
Next, we need to install CKFinder, which is a file manager that allows us to upload and manage files in CKEditor. We can install CKFinder by downloading it from the official website and extracting it to the public
directory of our Laravel project.
Step 5: Configure CKFinder
After installing CKFinder, we need to configure it to work with our Laravel project. Open the config.php
file located in public/ckfinder/config
and add the following code:
<?php
return array(
'authentication' => function () {
return true;
},
'backends' => array(
'default' => array(
'baseUrl' => '/public/ckfinder/userfiles/',
'root' => '/public/ckfinder/userfiles/',
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8',
),
),
);
This will configure CKFinder to use the public/ckfinder/userfiles directory as the root directory for uploaded files.
Step 6: Test the Image Upload
Finally, we can test the image upload functionality by visiting the /ckeditor route in our browser. We should see a CKEditor instance with an image upload button. Clicking on the button should allow us to select an image file and upload it to the server. Once the image is uploaded, we should see it in the CKEditor instance.
Conclusion
In this blog post, we explored how to use CKEditor in Laravel 10 and upload images to it. We first installed Laravel 10 using Composer and then installed CKEditor and CKFinder. We then created a route and a view that loaded CKEditor and allowed us to upload images.
Finally, we tested the image upload functionality and confirmed that it was working correctly. With these steps, we can easily integrate CKEditor into our Laravel 10 applications and provide a powerful WYSIWYG editor for our users.