How To Add Summernote Editor In Laravel

Websolutionstuff | Jun-17-2020 | Categories : Laravel PHP jQuery

In this tutorial, I will let you know how to use summernote editor in laravel, In laravel or PHP many editors are available but today I will give you an example of summernote.

Summernote editor is a rich textbox editor, using summernote editor you can take many actions like, insert an image, add tables, changes font style, add links, add snippet code and many more feature provides.

For summernote editor you need to add summernote js and CSS CDN.

<html>
<head>
  <title>How to add summernote editor in laravel - websolutionstuff.com</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
</head>
<body>
<div class="row">
    <div class="col-md-12">
        <h1 class="text-center">How to add summernote editor in laravel - websolutionstuff.com</h1>
        <div class="col-md-12">        
            <textarea name="summernote" id="summernote"></textarea>
        </div>
    </div>
</div>    

  <script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 400, 
            placeholder: 'websolutionstuff.com',
        });
    });
  </script>
</body>
</html>

 

 

After this, you will get output like the below screenshot.

summernote editor


You might also like:

Recommended Post
Featured Post
How To Copy Text To Clipboard In React JS
How To Copy Text To Clipboard...

In this article, we will see how to copy text to the clipboard in react js. you will learn how to copy text to...

Read More

Aug-31-2022

Laravel 10 Apexcharts Bar Chart Example
Laravel 10 Apexcharts Bar Char...

In this article, we will see the laravel 10 apexcharts bar chart example. Here, we will learn about how to create a bar...

Read More

May-24-2023

Two Way Data Binding In Angular 12
Two Way Data Binding In Angula...

In this article, we will see how two-way data binding in angular 12. When you create a variable or property to data...

Read More

May-12-2022

How to Create a Livewire Image Upload in Laravel 10?
How to Create a Livewire Image...

Livewire has revolutionized the way developers build interactive web applications with its real-time capabilities. And w...

Read More

Aug-02-2023