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

Recommended Posts

View All

Laravel 9 Livewire Form Submit Tutorial


Laravel 9 Work With Livewire Form Submit Tutorial. laravel 9 livewire form submit example, create form with laravel 9 livewire, laravel 9 livewire tut...

Laravel 8 Clear Cache of Route, View, Config Command Example


laravel 8 clear cache, laravel 8 clear cache config, laravel 8 cache clear view, laravel 8 cache clear config, laravel 8 cache clear command

Most Important Array Methods in JavaScript


Learn the most important array methods in JavaScript, including push, pop, shift, unshift, forEach, map, filter, reduce, and find. Improve your coding...

How To Use Chart JS In Laravel 


laravel chart js, laravel chartjs ajax example, how to create chart in laravel, how to use chart js in laravel, chartjs laravel example, laravel chart...

Building Smarter Web Applications with OpenAI for Laravel


In this tutorial, we'll explore how to use OpenAI in Laravel, and how it can help us build smarter, more efficient web applications.