How to Install and Use Summernote Editor in Laravel?

Last Updated on by in Laravel
This tutorial demonstrates how to install and use Summernote WYSIWYG Code Editor with Laravel. I will show you step by step process of summernote editor example.

What is WYSIWYG?

In general “What You See Is What You Get” (WYSIWYG) is a popular word that almost every web developer is aware of.

It is is used to check the final output web application.

A WYSIWYG program runs on a web page or template. It is used to write down meaningful codes that help in editing the content in real-time.

It creates a bridge with the full consensus between human and computer, outputs the content that will be displayed as a final option.

Installing and using summernote in laravel is easy. There are other rich text editors available that allow you to edit your content in real-time environment.

You can check out our previous tutorial where we explained How to Install & Use CKEditor in Laravel.

Summernote WYSIWYG Editor

Summernote WYSIWYG editor comes with foundational features that are necessary for content editing.

Implementing Summernote in Laravel is easy, and you can edit multiple HTML elements simultaneously such as image, list items, titles, upload, anchor link, font family, bold, italic etc.

Summernote Features

Theoretically, It comes with fully-loaded with features, we have conjugated a handful of features list that makes content editing flawless.

  • Real-time Text Block Editing
  • Integration with Server
  • Rich Text Editing
  • Supports Bootstrap 3 to 4.x.x
  • Easy HTML Formatting
  • Smart User Interaction
  • Works in all Major Browsers: Safari, Chrome, Firefox, Opera, Edge and Internet Explorer 9+
  • Works in all Major Operating Systems: Linux, Windows and macOS
  • Lightweight (js+css: 100Kb)

Table of Contents

  1. Install Laravel Project
  2. Install Summernote Editor
  3. Display Summernote Editor

Install Laravel Project

Let’s install a new laravel application using below command, in here we incorporate Summernote (WYSIWYG) Editor.

composer create-project laravel/laravel laravel-summernote-editor --prefer-dist

Run command to get inside the project directory.

cd laravel-summernote-editor

Install Summernote Editor in Laravel

Summernote editor can easily be added in laravel with just a simple CDN link, and As you see further, we will add summernote CSS and JavaScript links in the Laravel template.

Summernote works on open source libraries such as jQuery and Bootstrap, and we will build this tutorial using the latest version of Bootstrap and Summernote editor library.

<!-- include libraries(jQuery, bootstrap) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- summernote css/js -->
<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>

Display Summernote Editor in Laravel 9

Let’s check out the simple example by creating and placing the given below code in views/home.blade.php blade view file.

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Summernote Editor Example</title>

    <!-- include libraries(jQuery, bootstrap) -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-7 offset-3 mt-4">
                <div class="card-body">

                    <form method=”POST” action="">
                        @csrf
                        <div class="form-group">
                            <textarea class="form-control" name="summernote" id="summernote"></textarea>
                        </div>
                        <button type=”submit” class="btn btn-danger btn-block">Save</button>
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
</body>

<!-- summernote css/js -->
<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>
<script type="text/javascript">
    $('#summernote').summernote({
        height: 400
    });
</script>

</html>

Run the mentioned-below command to view the Summernote WYSIWYG Code Editor example in the browser.

php artisan serve

Open the following link: http://127.0.0.1:8000

Integrate Summernote Editor in Laravel