How to Install Summernote Editor in Laravel

Hello Dev,

Summernote is a popular open-source WYSIWYG (What You See Is What You Get) HTML editor. It can be easily integrated into Laravel to provide a rich text editing experience for users. In this article, we will go over the steps to install and use Summernote in Laravel.

Step 1: Installation

To install Summernote in Laravel, you need to include it in your project's dependencies. You can do this by using the following command in your terminal:

composer require summernote/summernote

Step 2: Include Summernote CSS and JS files

Next, you need to include the Summernote CSS and JS files in your project. You can include them in your project's layout file or in the blade file where you want to use Summernote. To include the files, add the following lines in your HTML file:

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

Step 3: Initialize Summernote

To initialize Summernote, you need to add the following script to your HTML file:

<script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
</script>

Step 4: Use Summernote

Now that you have installed and initialized Summernote, you can use it in your project. To do this, add the following code in your HTML file where you want to use Summernote:

<textarea id="summernote" name="text"></textarea>

Step 5: Save and Retrieve Data

To save the data entered in Summernote, you need to submit the form that contains the Summernote textarea. You can then retrieve the data in your Laravel controller using the following code:

$text = $request->input('text');

Conclusion

By following these steps, you can easily install and use Summernote in Laravel. Summernote provides a rich text editing experience for users and makes it easy to add and edit content in your Laravel project.

#ChatGPT