Laravel 7/6 Ckeditor Image Upload Example

Laravel 7/6 Ckeditor Image Upload Example

In this post we will give you information about Laravel 7/6 Ckeditor Image Upload Example. Hear we will give you detail about Laravel 7/6 Ckeditor Image Upload ExampleAnd how to use it also give you demo for it if it is necessary.

Today, i wanted to give you example of how to use ckeditor in laravel 7/6, as well we ckeditor with image upload in laravel 7/6 application. you have to follow 4 step to install ckeditor in laravel 7/6 and image upload in ckeditor with laravel 7/6.

You can also see preview of image upload in ckeditor with laravel 7/6.

We will use filebrowseruploadurl and filebrowserUploadMethod function of ckeditor in laravel 5. so if you have ckeditor image upload not working in laravel then i will hep you to how to upload image using ckeditor in laravel.

I write very simple example of image uploading with laravel step by step so you can easily use in your laravel. Ckeditor is a most powerful tool for content editor. so if you have image upload option also available then it awesome.

So, let’s see bellow steps to getting done with image upload in ckeditor laravel.

Step 1: Add Routes

First we need to create two routes for display ckeditor form page and another for image uploading. so let’s create 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 will create new controller as CkeditorController with two method index() and upload(). in index method we will return and view and upload method we will write code of image uploading.

app/Http/Controllers/CkeditorController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class CkeditorController extends Controller

{

/**

* success response method.

*

* @return IlluminateHttpResponse

*/

public function index()

{

return view('ckeditor');

}

/**

* success response method.

*

* @return IlluminateHttpResponse

*/

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;

}

}

}

Also see:Laravel 6 File Upload Tutorial Example

Step 3: Create Blade File

Here, we need to create ckeditor.blade.php file and write form logic and ckeditor js code. so let’s create 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 last step, we need to create “images” folder on your public directory. so must be create with permission.

Now we are ready to run our application example with laravel 6 so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

Also see:Laravel 7/6 Auth Login with Username or Email Tutorial

http://localhost:8000/ckeditor

Preview:

I hope it can help you….

Hope this code and post will helped you for implement Laravel 7/6 Ckeditor Image Upload Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  8  =  12

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US