Laravel Summernote Editor Image Upload Example
In this article, we will see laravel summernote editor image upload example. there are many editors available in laravel to save rich text here we will use summernote editor. summernote editor is a simple but customizable, powerful rich text editor for the web, here you can image upload in summernote editor using laravel 8.
So, let's see how to implement summernote editor with an image upload example, image upload in summernote editor using laravel 8, how to upload image in summernote, summernote image upload laravel 7/8, laravel 7/8 summernote image upload.
Now, we'll create ImageUploadController.
php artisan make:controller ImageUploadControllerNow, add the below code in app/Http/Controllers/ImageUploadControler.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageUploadController extends Controller
{
public function image()
{
return view('summernote');
}
public function upload(Request $request)
{
$this->validate($request, [
'description' => 'required',
]);
$description=$request->input('description');
$dom = new \DomDocument();
$dom->loadHtml($description, 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($type, $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);
}
$description = $dom->saveHTML();
}
}
Read Also: How To Convert Excel To JSON In Javascript
Now, create a blade file for view.
<!DOCTYPE html>
<html>
<head>
<title>Laravel Summernote Editor Image Upload Example - Techsolutionstuff</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>
<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>
<div class="row" style="margin-top: 50px;">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h4>Laravel Summernote Editor Image Upload Example - Techsolutionstuff</h4>
</div>
<div class="panel-body">
<form method="POST" action="{{ route('image.upload') }}">
{{ csrf_field() }}
<div class="form-group">
<strong>Description:</strong>
<textarea class="form-control summernote" name="description">
</textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
});
});
</script>
</body>
</html>
You might also like :
- Read Also: How to Install CKEditor in Laravel
- Read Also: Create Dummy Data Using Tinker In Laravel
- Read Also: How To Hide Toolbar In Summernote Editor
- Read Also: How To Add Summernote Editor In Laravel 8
