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.
In order to install CKEditor in Laravel, you can refer to our prior article.
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.
Table of Contents
- Install Laravel
- Create Route
- Create a Model and Controller
- Create Blade Files
- Run Our Laravel Application
Install Laravel
We will install Laravel 9 so first, open the terminal or command prompt and use the command prompt to navigate to the xampp htdocs folder directory. then execute the command below.
composer create-project --prefer-dist laravel/laravel laravel9_ckeditorCreate Route
In the "routes/web.php" file, add the following route code.
<?php
use App\Http\Controllers\ArticleController;
/*
|--------------------------------------------------------------------------
| 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::class, 'uploadImage'])->name('upload');
?>Create a Model and Controller
The commands listed below assist in creating the controller and model.
php artisan make:controller ArticleController --resource --model=ArticleArticle.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
use HasFactory;
protected $fillable = [
'title','description', 'author_name'
];
}
?>ArticleController.php
<?php
namespace App\Http\Controllers;
use App\Models\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;
}
}
}
?>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 - CodeSolutionStuff</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>Run Our Laravel Application
Finally, we will create the article-form.blade.php file and paste the following code in the resources/views/ subdirectory directory.
php artisan serveNow, we'll execute our example by navigating to the URL listed below in a browser.
http://127.0.0.1:8000/article