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
Datatables Expand/Collapse Columns
Datatables Expand/Collapse Col...

In this article, we will see how to expand/collapse columns in datatable. The Datatables API has a number of method...

Read More

Jun-05-2022

Next Previous Link Button Pagination in Laravel
Next Previous Link Button Pagi...

Today we will learn next previous link button pagination in laravel, Using paginate method you can easily create paginat...

Read More

Jun-14-2021

Laravel 8 Create Custom Helper Function Example
Laravel 8 Create Custom Helper...

In this article, we will see laravel 8 create a custom helper function example. As we all know laravel provides man...

Read More

Oct-12-2020

Skype Screen Sharing Not Working Ubuntu In 22.04
Skype Screen Sharing Not Worki...

In this article, we will see skype screen sharing is not working in ubuntu 22.04. When you install skype in ubuntu...

Read More

Feb-15-2023