Thirdparty js library - Summernote [Solved]


I need a little help about 3rd party js library… I use summernote for my textarea text editor.
I’ve added the wire:ignore and the on change function in my script, but the on change method never fires.

I have a select tag where I used bs4-selectpicker library and the on change method works on that one.

In head:
<link href="" rel="stylesheet">


<div class="form-group row">
    <label for="message" class="col-sm-1 control-label">Message<span class="ml-2 text-danger">*</span></label>
    <div class="col-sm-11" wire:ignore>
        <textarea rows="10" id="message" class="form-control {{ $errors->has('message') ? ' is-invalid' : '' }}" name="message" wire:model="message" autocomplete="off">{{ $message }}</textarea>
        @if ($errors->has('message'))
            <span class="invalid-feedback" role="alert" >
                <strong>{{ $errors->first('message') }}</strong>

In scripts

<script src=""></script>
$(document).ready(function() {

    $('#requester').on('change', function (e) {

        height: 200,
        codemirror: {
            theme: 'monokai'

    $('#message').on('change', function (e) {
        console.log("Changed editor");


LW version (composer)
"livewire/livewire": "^0.7.2"

Could please anyone help?

Thank you

Silly me!!! Apologies if I’ve wasted anybody’s time.

Found the solution.

        height: 200,
        codemirror: {
            theme: 'monokai'
        callbacks: {
            onChange: function(contents, $editable) {
                @this.set('message', contents);

I won’t delete this topic as might will be helpful for someone.


Great one.
Works well.
But how to get the old value while update?
Any thoughts.

I use {{ old('description', $description) }}

    placeholder: 'Note Body...',
    tabsize: 2,
    height: 120,
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'underline', 'clear']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'codeview', 'help']]
    callbacks: {
        onChange: function(e) {

               @this.set('note', e);

trying to get old() but no success.
I am able to create new note. but on update i able to place the value inside the summernote.

       <div wire:ignore>
      <div class="form-group">
        <label for="note">Note</label>
        <textarea  class="form-control" id="editable"  wire:model="note"></textarea >

I’m having similar issue, can you please share your complete code ?