![How to Use Summernote Editor in Laravel 10?](/storage/blogs/images/1694008883Strength and growth come only through continuous effort and struggle (10).png)
How to Use Summernote Editor in Laravel 10?
- showkat ali
- 06th Feb, 2024
- 940
- 0
Introduction:
Summernote is a popular open-source WYSIWYG (What You See Is What You Get) editor that lets you easily create and edit rich text content. In this tutorial, we will see how to use the Summernote editor in a Laravel 10 application. This guide contains installation instructions and code examples for several Laravel versions.
First, you must install the Laravel project on your machine, and then proceed with the steps listed below.
A Step-by-Step Guide
Install Summernote:
First, we will need to install Summernote with npm. Open the terminal and go to the root directory of your Laravel project. Then, run this command:
npm install summernote
There is another method without installing the summernote: using cdn.js and linking the file in your project head.
1. Include the required libraries.
In the<head>
section of your blade file, include jQuery, Bootstrap, and Summernote CSS and JavaScript files using CDN links.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
2.HTML Structure:
Create the necessary blade structure for the editor form within a container.
3.Editor Initialization:
Use JavaScript to initialize Summernote in the designated textarea with the .summernote
class.
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Summernote Editor</h1>
// add your form field
<textarea id="summernote"></textarea>
</div>
@endsection
@section('scripts')
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview']],
]
});
});
</script>
@endsection
4.Submit Form:
Create a form that captures user inputs, including a title and the Summernote content.
Example Blade File
Here's a simplified version of your blade file with headings and subheadings:
<html>
<head>
<title>How to Use Summernote WYSIWYG Editor with Laravel? </title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-2 mt-5">
<div class="card">
<div class="card-header bg-info">
<h6 class="text-white">How to Use Summernote WYSIWYG Editor with Laravel?</h6>
</div>
<div class="card-body">
<form method="post" action="" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Title</label>
<input type="text" name="name" class="form-control"/>
</div>
<div class="form-group">
<label><strong>Description :</strong></label>
<textarea id="summernote" name="description"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success btn-sm">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
</body>
</html>
Displaying Content:
To display the Summernote content in your Laravel application, use the
{!! $post->description !!}
Now you can check your own.
You can also use CKEditor, as shown here: Laravel CKEditor Example.
Conclusion:
By following these steps, you can seamlessly integrate the Summernote WYSIWYG editor into your Laravel project, allowing for easy and intuitive content creation and formatting.
We are Recommending you
-
Fetch API vs. Axios: A Comparison of the Best Option for HTTP Requests
-
How to Use Quill Rich Text Editor Laravel 10: A Comprehensive Guide
-
Top 10+ Best Web Frameworks to Learn for a Successful Web Development Career
-
Pusher real-time Notification with Laravel and React.js
-
How to pitch in ChatGPT in Education
0 Comments
Please log in to leave a comment.
Latest blog
Related Interview Questions
Core PHP Interview Questions (2023)
18th Aug