Laravel 9 CKeditor Image Upload With Example

Today, we’ll show you how to submit images using CKEditor in Laravel 9. (Laravel 9 CKeditor Image Upload). Like TinyMCE, CKEditor is a sort of WYSIWYG HTML editor.

The WYSIWYG HTML editors are used when we need to store lengthy text, article content, product summaries, and other tag content along with the description in our database.

Free installation of our Laravel application’s WYSIWYG editor. Let’s see how to upload an image using CKEditor in Laravel by following the steps below.

Step 1: Install Laravel
Step 2: Create Route
Step 3: Create a Model and Controller
Step 4: Create Blade Files
Step 5: Run Our Laravel Application

Step 1: Install Laravel

We’re going to install Laravel 9, so first, open the terminal or command prompt and use it to navigate to the XAMPP htdocs folder directory. then execute the command below.

composer create-project --prefer-dist laravel/laravel laravel9_ckeditor

Step 2: Create Route

In the “routes/web.php” file, add the following route code.

<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
   // return view('welcome');	
});

Route::post('upload_image','ArticleController@uploadImage')->name('upload');

?>

Step 3: Create a Model and Controller

The commands listed below assist in creating the controller and model.

php artisan make:controller ArticleController --resource --model=Article

Article.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
    //
 protected $fillable = [
        'title','description', 'author_name'
    ];
}
?>

ArticleController.php

<?php
namespace App\Http\Controllers;
use App\Article;
use Illuminate\Http\Request;
use Response;
class ArticleController extends Controller
{
    public function index()
    {
        return view('article-form');
    }
    public function uploadImage(Request $request) { 
 if($request->hasFile('upload')) {
            $originName = $request->file('upload')->getClientOriginalName();
            $fileName = pathinfo($originName, PATHINFO_FILENAME);
            $extension = $request->file('upload')->getClientOriginalExtension();
            $fileName = $fileName.'_'.time().'.'.$extension;
        
            $request->file('upload')->move(public_path('images'), $fileName);
   
            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('images/'.$fileName); 
            $msg = 'Image uploaded successfully'; 
            $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
               
            @header('Content-type: text/html; charset=utf-8'); 
            echo $response;
        }
    } 
}
?>

Step 4: Create Blade Files

The article-form.blade.php file will then be created with the following code pasted into the “resources/views/” subdirectory directory.

article-form.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Laravel 9 Integrate Ckeditor With Example - XpertPhp</h1><br> 
                <form method="post" action="{{ route('store.article') }}" class="form form-horizontal">               
                  @csrf
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="title" class="form-control"/>
                    </div>  
                    <div class="form-group">
                        <label>Description</label>
                         <textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor"></textarea> 
                    </div>  
                    <div class="form-group">
                        <label>Author Name</label>
                        <input type="text" name="author" class="form-control"/>
                    </div>   
                    <div class="form-group">
                        <input type="submit" value="Submit" class="btn btn-primary"/>
                    </div> 
                </form>             
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
    <script>
    CKEDITOR.replace('summary-ckeditor', {
        filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
    </script> 
</body>
</html>

Step 5: Run Our Laravel Application

The command listed below can be used to launch the server and run this example.

php artisan serve

Now, we’ll execute our example by navigating to the URL listed below in a browser.

http://127.0.0.1:8000/article

Categories

Recent Posts