Skip to content

Instantly share code, notes, and snippets.

@adityardiansyah
Created July 23, 2020 06:39
Show Gist options
  • Save adityardiansyah/07fc18f41079dcb89a72c8ea05cdb353 to your computer and use it in GitHub Desktop.
Save adityardiansyah/07fc18f41079dcb89a72c8ea05cdb353 to your computer and use it in GitHub Desktop.
Setting Summernote for Laravel Livewire
// HTML
<div class="col-md-12">
<div class="form-group" wire:ignore>
<label for="desciption">Deskripsi</label>
<textarea type="text" input="description" id="summernote" class="form-control summernote">{{ $description }}</textarea>
</div>
</div>
// JAVASCRIPT
$('.summernote').summernote({
tabsize: 2,
height: 200,
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(contents, $editable) {
@this.set('description', contents);
}
}
});
@SigalZ
Copy link

SigalZ commented Jan 16, 2022

@dejury
Thank you for your code. I tried it, without totally understanding what it is doing.
The problem is I don't see that Livewire.on(...) is ever being called.
Also I have validations on the text areas that do not appear because of the wire:ignore.
I also have 2 text areas on the same page and I'm not sure how to implement 2 text-areas with your code.
Can you maybe help?

@gid-m
Copy link

gid-m commented Apr 17, 2022

You can also use the onBlur callback instead of onChange

@hoachan
Copy link

hoachan commented Dec 24, 2023

From my experience, I use alpine js for performance optimization.

@mohagungnursalim
Copy link

kalau untuk diterapkan di modal edit gmna gan?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment