Laravel 7.x and 6.x - Summernote Wysiwyg Editor with Image Upload Example

July 5, 2017 | Category : Laravel PHP

Summernote Wysiwyg is very simple and cool editor. If you use simply textarea and you require to make more tools like bold, italic or image upload, Then you have to choose Summernote plguin.

In this article, i will let you know how to use summernote editor in our laravel 5 application. In this example i am going to use summernote with bootstrap. So you can simply use summbernote editor. If you see Summernote editor then they provide image upload but in base64 string. But Base62 string take more space of your database memory So it's better we store image upload it to folder and store it instead of Base64 string.

So, let's proceed with following stuff:

Preview:

Add Routes:

We are going from scratch so, first add two new routes in your route file for summernote view and another for post method. So let's add both routes in web.php file:

routes/web.php

Route::get('summernote',array('as'=>'summernote.get','uses'=>'FileController@getSummernote'));

Route::post('summernote',array('as'=>'summernote.post','uses'=>'FileController@postSummernote'));

Add Controller:

Here, we will add new FileController controller and define two new method, getSummernote() and postSummernote(). We will simply handle route method write code of upload image.

So, let's create FileController.php file and put bellow code:

app/Http/Controllers/FileController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileController extends Controller

{

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function getSummernote()

{

return view('summernote');

}

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function postSummernote(Request $request)

{

$this->validate($request, [

'detail' => 'required',

]);

$detail=$request->input('detail');

$dom = new \DomDocument();

$dom->loadHtml($detail, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

$images = $dom->getElementsByTagName('img');

foreach($images as $k => $img){

$data = $img->getAttribute('src');

list($type, $data) = explode(';', $data);

list(, $data) = explode(',', $data);

$data = base64_decode($data);

$image_name= "/upload/" . time().$k.'.png';

$path = public_path() . $image_name;

file_put_contents($path, $data);

$img->removeAttribute('src');

$img->setAttribute('src', $image_name);

}

$detail = $dom->saveHTML();

dd($detail);

}

}

Add View File:

Here we will create summernote.blade.php file and take simple form with summernote. so put bellow code on that file.

resources/views/summernote.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5 - Summernote Wysiwyg Editor with Image Upload Example</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js-->

<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>

</head>

<body>

<form method="POST" action="{{ route('summernote.post') }}">

{{ csrf_field() }}

<div class="col-xs-12 col-sm-12 col-md-12">

<div class="form-group">

<strong>Details:</strong>

<textarea class="form-control summernote" name="detail"></textarea>

</div>

</div>

<div class="col-xs-12 col-sm-12 col-md-12 text-center">

<button type="submit" class="btn btn-primary">Submit</button>

</div>

</form>

</body>

<script type="text/javascript">

$(document).ready(function() {

$('.summernote').summernote({

height: 300,

});

});

</script>

</html>

At last make sure you have "upload" folder in your public directory. So let's create if you haven't.

I hope you found you solution...