Loading image

Blogs / Programming

How to Use Summernote Editor in Laravel 10?

How to Use Summernote Editor in Laravel 10?

  • showkat ali
  • 1 Comments
  • 6060 View

 

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/[email protected]/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/[email protected]/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

  • Programming
showkat ali Author

showkat ali

Greetings, I'm a passionate full-stack developer and entrepreneur. I specialize in PHP, Laravel, React.js, Node.js, JavaScript, and Python. I own interviewsolutionshub.com, where I share tech tutorials, tips, and interview questions. I'm a firm believer in hard work and consistency. Welcome to interviewsolutionshub.com, your source for tech insights and career guidance.

1 Comments

Anonymous User
isefriyan

sangat membantu,terimakasih🙏

Post Comment

Recent Blogs

Recent posts form our Blog

How to Create a Custom Signup Form in Django 5.0

How to Create a Custom Signup Form in Django 5.0

Qadir Hassan
/
Programming

Read More
Simplify Image Uploads in Laravel

Simplify Image Uploads in Laravel

showkat ali
/
Programming

Read More
How to use DataTables in Laravel 11

How to use DataTables in Laravel 11

showkat ali
/
Programming

Read More
Measuring HR Performance: KPIs Every HR Manager Should Track

Measuring HR Performance: KPIs Every HR Manager Should Track

rimsha akbar
/
Human Resource

Read More
Timeline Chart bar with date axis to be displayed on top

Timeline Chart bar with date axis to be displayed on top

showkat ali
/
Programming

Read More
How to Create Dynamic 3D FlipBooks Using jQuery Library

How to Create Dynamic 3D FlipBooks Using jQuery Library

showkat ali
/
Programming

Read More