Today I wanted to give you an example of using ckeditor in Laravel 6 and ckeditor with loading images in the Laravel 6 application. You need to follow the 4 steps to install ckeditor in Laravel 6 and upload images to Ckeditor with Laravel 6.
You can also preview image loading in ckeditor with Laravel 6.
We will use the filebrowseruploadurl and filebrowserUploadMethod functions from ckeditor in laravel 5. If loading ckeditor images in laravel does not work, I will explain how to load the image with ckeditor in laravel.
I am writing a very simple example of gradually loading images with Laravel so that you can easily use it in your Laravel. Ckeditor is the most powerful content editor tool. So if you have the ability to load images as well, this is amazing.
So let's take a look at the following steps to load images into ckeditor laravel.
Step 1: Add Routes
First we need to create two paths to display the ckeditor form page and another to load images. So let's do it.
routes/web.php
Route::get('ckeditor', 'CkeditorController@index'); Route::post('ckeditor/upload', 'CkeditorController@upload')->name('ckeditor.upload');
Step 2: Create Controller
In this step we create a new controller like CkeditorController with two index () and upload () methods. In the index method we return and see the upload method and write the image upload code.
app/Http/Controllers/CkeditorController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class CkeditorController extends Controller { /** * success response method. * * @return \Illuminate\Http\Response */ public function index() { return view('ckeditor'); } /** * success response method. * * @return \Illuminate\Http\Response */ public function upload(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 3: Create Blade File
Here we need to create the ckeditor.blade.php file and write form logic and ckeditor js code. So let's do it.
resources/views/ckeditor.blade.php
<!DOCTYPE html> <html> <head> <title>Laravel 6 Ckeditor Image Upload Example - ItSolutionStuff.com</title> <script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script> </head> <body> <h1>Laravel 6 Ckeditor Image Upload Example - ItSolutionStuff.com</h1> <textarea name="editor1"></textarea> <script type="text/javascript"> CKEDITOR.replace('editor1', { filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}", filebrowserUploadMethod: 'form' }); </script> </body> </html>
Step 4: Create images folder
In the last step we have to create the folder "images" in your public directory. Then it has to be created with permission.
Now we can run our application example with Laravel 6. Therefore, run the following command for quick execution:
I hope this could help you ...
Now we can run our application example with Laravel 6. Therefore, run the following command for quick execution:
php artisan serve
http://localhost:8000/ckeditor
I hope this could help you ...
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.