How to Upload Summernote Images in Php
Summernote Paradigm Upload With Instance Laravel 8
Today, in this tutorial nosotros learn how to upload images in summernote laravel. this post image upload in summernote using a text editor. We will apply summernote editor in the paradigm upload laravel. I would like to bear witness you laravel image upload in summernote text editor with an example.
Summernote Wysiwyg is a very simple editor. If you apply simply use textarea and yous require to make more tools like bold, italic, or epitome upload, And then you have to choose Summernote plugin.
In this example, I am going to utilize summernote with bootstrap your pick to use whatsoever. So you tin can simply apply summernote text editor. If Yous need summernote editor with prototype upload in laravel 8.
Hither I will give you a full instance for laravel summernote text editor with paradigm upload and summernote insert image URL.
Laravel eight Summernote Paradigm Upload With Instance
- Step one: Install Laravel App
- Step two: Setting Database Configuration
- Step three: Add Road
- Step 4: Create Controller
- Step 5: Create View File
Step 1 : Install Laravel App
Nosotros need to go a fresh laravel version application using the beneath control. So Permit's open the last and run the below control.
composer create-project --prefer-dist laravel/laravel summernote_img_upload
Footstep two : Setup Database Configuration
We volition open the .env file and change the database name, username, and password in the env file to create summernote image upload laravel.
DB_CONNECTION=mysql DB_HOST=127.0.0.i DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name DB_USERNAME=Enter_Your_Database_Username DB_PASSWORD=Enter_Your_Database_Password
Step three : Add Road
We will create two routes for testify summernote and the other is post route upload prototype. And so let's add the beneath route in the road file.
routes/spider web.php
Route::become('summernote-paradigm',array('every bit'=>'summernote.get','uses'=>'[email protected]')); Road::mail('summernote-prototype',array('every bit'=>'summernote.image.upload','uses'=>'[email protected]')); Step 4 : Create Controller
We will create a controller using the PHP artisan control and then afterwards adding 2 methods for view summernote and upload images in implement Summernote Wysiwyg Editor in Laravel.
php artisan make:controller ImageController
Successfully run this command and so later Put below code in ImageController.php.
app/Http/Controllers/ImageControler.php
<?php namespace App\Http\Controllers; apply Illuminate\Http\Request; class ImageController extends Controller { /** * Show the application dashboard. * * * @return \Illuminate\Http\Response */ public office image() { return view('summernote'); } /** * Bear witness the application dashboard. * * @return \Illuminate\Http\Response */ public function upload(Asking $asking) { $this->validate($request, [ 'clarification' => '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){ $information = $img->getAttribute('src'); list($blazon, $data) = explode(';', $information); list(, $data) = explode(',', $data); $data = base64_decode($information); $image_name= "/upload/" . time().$k.'.png'; $path = public_path() . $image_name; file_put_contents($path, $information); $img->removeAttribute('src'); $img->setAttribute('src', $image_name); } $description = $dom->saveHTML(); dd($description); } } Stride v : Create View File
We volition create a bract file view summernote editor. So let'due south open the view file and put the beneath code. we learn upload images from summernote text editor.
resources/views/summernote.bract.php
<html> <head> <title>Summernote Paradigm Upload With Case Laravel 8 - phpcodingstuff.com</championship> <script type="text/javascript" src="https://code.jquery.com/jquery-1.ix.1.min.js"></script> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/iii.i.ane/css/bootstrap.min.css" /> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.i/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.four/summernote.js"></script> </head> <trunk> <div class="row" manner="margin-top: 50px;"> <div class="col-md-viii col-doctor-offset-2"> <div class="panel console-main"> <div form="panel-heading"> <h4>Summernote Image Upload With Example Laravel 8 - phpcodingstuff.com</h4> </div> <div class="panel-body"> <form method="POST" action="{{ route('summernote..image.upload') }}"> {{ csrf_field() }} <div form="course-group"> <strong>Description:</potent> <textarea grade="form-control summernote" name="description"></textarea> </div> <push button type="submit" class="btn btn-success">Submit</button> </course> </div> </div> </div> </div> <script blazon="text/javascript"> $(document).ready(function() { $('.summernote').summernote({ meridian: 300, }); }); </script> </torso> </html> Then we are ready to run our case so run blare command for a quick run:
php artisan serve
I hope it can assistance you...
My Proper noun is Robert wait from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'yard working on front-end & dorsum-end web evolution using popular web technology Languages. That'southward why I honey to share my coding knowledge in a smart way.
Source: https://www.phpcodingstuff.com/blog/summernote-image-upload-with-example-laravel-8.html
0 Response to "How to Upload Summernote Images in Php"
Post a Comment