Laravel 6 Image Uploader and Browser for CKEditor

Today, We want to share with you Laravel 6 Image Uploader and Browser for CKEditor.In this post we will show you Laravel 6 Ckeditor Image Upload Example, hear for Laravel 6 CKEditor with Image Upload we will give you demo and example for implement.In this post, we will learn about text editor with image upload in php Laravel 6.2 with an example.

Laravel 6 Image Uploader and Browser for CKEditor

There are the Following The simple About Image Uploader and Browser for CKEditor Full Information With Example and source code.

As I will cover this Post with live Working example to develop Uploading Image With CKEditor And KCFinder In Laravel 6, so the How to add ckeditor with image upload in Laravel 6.2 ? is used for this example is following below.

Phase 1: Define a Laravel 6 Routes

routes/web.php

Route::get('myeditorplugin', '[email protected]');
Route::post('myeditorplugin/store', '[email protected]')->name('myeditorplugin.store');

Phase 2: Make a Laravel Controller

app/Http/Controllers/MovieController.php

<!--?php namespace App\Http\Controllers; use Illuminate\Http\Request; class MovieController extends Controller { public function index() { return view('myeditorplugin'); } public function store(Request $request) { if($request->hasFile('store')) {<br ?--> $originName = $request->file('store')->getClientOriginalName();
$img_name = pathinfo($originName, PATHINFO_FILENAME);
$fl_extension = $request->file('store')->getClientOriginalExtension();
$img_name = $img_name.'_'.time().'.'.$fl_extension;

$request->file('store')->move(public_path('medias'), $img_name);

$CKEditorFuncNum = $request->input('CKEditorFuncNum');
$url = asset('medias/'.$img_name);
$success_msg = 'Movie medias/Image uploaded successfully, Good Luck!!';
$output = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$success_msg')</script>";

@header('Content-type: text/html; charset=utf-8');
echo $output;
}
}
}

Phase 3: Make a Laravel 6 Blade File

resources/views/myeditorplugin.blade.php



<script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>
<h1>PPH Laravel 6 Ckeditor Image Upload Example Tutorials - TamilRokers</h1>
<textarea name="movies_details"></textarea>

<script type="text/javascript">
    CKEDITOR.replace('movies_details', {
        filebrowserUploadUrl: "{{route('myeditorplugin.store', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
</script>


Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about how to upload image using ckeditor in laravel 6.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Vue JS Datepicker Examples with Demo
  2.   Class HTML not found laravel
  3.   codeigniter load multiple view inside view template
  4.   Top 10 Advanced Reactjs Interview Questions Answers
  5.   PHP GET File Contents Data Scraping Example
  6.   how to call javascript function in html & JavaScript Define
  7.   Shorthand comparisons using PHP Ternary Operator
  8.   PHP cURL Multiple Asynchronous Http Requests
  9.   Laravel 5.8 Dropzone Multiple Image Upload
  10.   Send Email via SMTP Server in Node.js using Nodemailer npm