Thirdparty js library - Summernote [Solved]

#1

Hi,

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="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">

Body

<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>
            </span>
        @endif
    </div>
</div>

In scripts

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
<script>
$(document).ready(function() {
    $('.selectpicker').selectpicker();

    $('#requester').on('change', function (e) {
        @this.set('requester', e.target.value);
    });

    $('#message').summernote({
        height: 200,
        codemirror: {
            theme: 'monokai'
      }
    });

    $('#message').on('change', function (e) {
        console.log("Changed editor");
        @this.set('message', e.target.value);
    });

});
</script>
@endpush

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

Could please anyone help?

Thank you

#2

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

Found the solution.

$('#message').summernote({
        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.

4 Likes
#3

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

#4

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

#5 
  $(document).ready(function(){
$('#editable').summernote({
    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 >
        
      </div>
    </div>
1 Like
#6

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

#7

This is very good solution but still onChange sends too many requests.