Hari ini dalam tutorial kali ini, Kita akan menjelaskan kepada bagaimana cara mengunggah gambar menggunakan CKEditor di laravel 8. Kode ini sangat berguna untuk proyek apa pun.
kami perlu menyimpan teks panjang, konten artikel, ringkasan produk, dan konten tag yang berbeda, dll, dengan deskripsi di database kami, kami menggunakan editor CKEditor. penggunaan teks bergaya editor ini mudah untuk menggunakan konten apa pun.
Saya menulis contoh yang sangat sederhana dari mengunggah gambar dengan laravel selangkah demi selangkah sehingga Anda dapat dengan mudah menggunakannya di laravel 8. Ckeditor adalah alat paling ampuh untuk editor konten. jadi jika Anda memiliki opsi unggah gambar juga tersedia maka itu luar biasa.
Beberapa masalah unggahan gambar pengembang CKEditor tidak berfungsi. jadi artikel ini untuk menggunakannya.
Jadi, mari kita lihat langkah-langkah di bawah ini untuk menyelesaikan unggahan gambar di CKEditor laravel 8.
Editor ini gratis untuk menginstal aplikasi laravel kami. mari ikuti langkah-langkah di bawah ini untuk cara mengupload gambar menggunakan CKeditor di laravel.
Pertama-tama, Kita akan menginstal laravel 8, jadi pertama buka command prompt atau terminal dan masuk ke direktori folder xampp htdocs menggunakan command prompt. setelah itu jalankan perintah di bawah ini.
composer create-project --prefer-dist laravel/laravel laravel8_ckeditor
Tambahkan kode route berikut di file "routes / web.php" .
<?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');
?>Langkah 3: Buat Model dan Controller
Di sini di bawah perintah membantu untuk membuat pengontrol dan 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;
}
}
}Langkah 4: Buat File Blade
Terakhir, Kita akan membuat file article-form.blade.php di direktori folder "resources / views /" dan menempelkan kode di bawah ini. kita belajar Bagaimana menambahkan CKEditor dengan upload gambar di laravel.
article-form.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Upload Image Using Ckeditor In Laravel 8 - phpcodingstuff.com</title>
<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 7 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>Langkah 5: Jalankan Aplikasi Laravel Kita
Kita dapat memulai server dan menjalankan contoh ini menggunakan perintah di bawah ini.
php artisan serve
Sangat tertarik dengan dunia Pemrograman Web & Mobile, saat ini fokus pada bagian Backend Web Developer, menggunakan PHP sebagai bahasa pemrograman utama, biasanya saya menggunakan Laravel.