Friday, February 21, 2020

How to add ckeditor with image upload in Laravel ?

      ,      No comments   
How to add ckeditor with image upload in Laravel


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: 

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.