Summernote editor with Livewire and Laravel – Examples

We often use WYSIWYG editor for our websites and summernote is one of those. Today we are going to learn the use of summernote with livewire and laravel and we will get the value of it while adding content there.

It is very easy to get the old value while updating the content. We will use the same approach to get the value of summernote editor for both adding and updating processes.

Although there could be multiple ways to achieve this, today I will show you the two methods to achieve this.

Get Source Code of the example

Follow me on the github for more free source code.

Get the Code

Get the value of summernote editor with jquery (Recommended)

This is a very simple trick to get the value of summernote editor livewire.

We are going to use jquery to get the value of it.

With this way, we can get the value of our editor in both cases while adding new content or even when updating the content. Because it will simply get the value of our textarea and it doesn’t matter that we have added the content or it was fetched from the database.

Below is the working example given.

create-post.blade.php

<div class="container mt-5">
    <div class="sum-model">
        <form wire:submit.prevent='submitPost($("#summernote").val())'>
            <div class="form-group">
                <label for="post_title">Name of the post</label>
                <input wire:model='postTitle' type="text" class="form-control" id="post_title">
            </div>
            <div class="form-group" wire:ignore>
                <label for="summernote">Write your post</label>
                <textarea name="post" id="summernote" class="form-control">{{ $postContent }}</textarea>
            </div>
            
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>

CreatePost.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class CreatePost extends Component
{
    public $postTitle;
    public $postContent;

    public function mount() {
        $this->postContent = "old data fetched from database";
    }

    public function render()
    {
        return view('livewire.create-post');
    }

    public function submitPost($content) {
        $this->postContent = $content;
        
        dd($this->postTitle, $content, $this->postContent);
    }
}

Summernote callback functions and livewire modals

Ok, we have another way to get the value of summernote in the livewire component. We can use callback functions to listen to the events of this WYSIWYG editor and when we get the value, we need to assign that value to our livewire modal.

create-post.blade.php

<div class="container mt-5">
    <div class="sum-model">
        <form wire:submit.prevent='submitPost()'>
            <div class="form-group">
                <label for="post_title">Name of the post</label>
                <input wire:model='postTitle' type="text" class="form-control" id="post_title">
            </div>
            <div class="form-group" wire:ignore>
                <label for="summernote">Write your post</label>
                <textarea name="post" id="summernote" class="form-control">{{ $postContent }}</textarea>
            </div>
            
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    @push('script')
    <script>
        $('#summernote').on('summernote.blur', function() {
            console.log('Editable area loses focus', this.value);
            @this.postContent = this.value;
        });
    </script>
    @endpush
</div>

custom.js

$('#summernote').summernote({
    height: 200,
    codemirror: {
        theme: 'monokai'
    },
    callbacks: {
        /* onInit: function() {
            console.log('Summernote is launched', this.value);
        } */
    }
});

So, we are using the onBlur event because when we finish the writing and click on the submit button, we will be able to listen to the blur event on our editor textarea.

While updating the data, we will have the old value in our livewire modal already. So, we will get that to our editor textarea to preview.

If you have noticed that we have used wire:ignore to our parent div of summernote editor textarea. Because we are using js only to work with summernote and no livewire modal is directly used with this textarea input. So, we can ignore livewire interaction with this editor.

This approach also helps us to avoid glitch with bootstrap tabs and livewire.

Don’ts : Do not use the onChange callback function because it will send lots of ajax requests on each keypress to update the livewire modal.

Hope you find this article useful.

See you in the next learning journey.