Summernote Wysiwyg is a very simple editor. If you use simply use textarea and you require to make more tools like bold, italic, or image upload, Then you have to choose Summernote plugin.
In this example, I am going to use summernote with bootstrap your choice to use any. So you can simply use summernote text editor. If You need summernote editor with image upload in laravel 8.
Here I will give you a full example for laravel summernote text editor with image upload and summernote insert image URL.
DB Insert | Summernote Image Upload With Example Laravel 8
<html>
<head>
<title>Summernote Image Upload With Example Laravel 8 - phpcodingstuff.com</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>
<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>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 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: 300,
});
});
</script>
</body>
</html>
Top comments (0)