Summernote and Livewire

[jorgelt87]

What seems to be the problem:
hello community from Argentina learning livewire; I have a problem and days without solving when I want to edit a text in summernote it does not show me anything in the editor, please help
Steps to Reproduce:

Are you using the latest version of Livewire:

Do you have any screenshots or code examples:
$(’#editable2’).summernote({
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(contents, $editable2) {
@this.set(‘datosUpdate’, contents, $editable2);
}
}
});

                    <label for="exampleFormControlInput3">Cuerpo de la noticia</label>

                    <textarea  class="form-control editable2  "  id="editable2" name="datosUpdate"  wire:model="datosUpdate"></textarea>

                </div>

[skywalker]

Can you explain more or post the full code?

[skywalker]

If you want to work with text editor, I suggest Trix Editor, See more in this thread

Using Trix text editor

I’m using Trix text editor and when I’m implemented on livewire I have this weird error (nothing in the console or the network tab) [trix fading] View: <div class="mb-4"> <label class="block text-gray-700 text-sm text-xl font-bold mb-2" for="order"> Page Content </label> <input id="body" value="Your Page Content Here" type="hidden" wire:model.debounce.365ms="form.body" name="content"> <trix-edito…

[Dimonka2]

First of all you have to wrap your summernote edit with the wire:ignore.

In order to have a real time response to the summernote input I have following js script:

document.addEventListener("livewire:load", function(event) {
        window.livewire.hook('message.processed', (message, component) => {
            initSummernotes();
            let obj = $('#your_element_id:not(.summernote-enabled)');
            $(obj).addClass('summernote-enabled');
            obj.on("summernote.change", debounced(500, function (e) {   // callback as jquery custom event
                let comment = $(e.target).summernote('code');
                let div = $(e.target).closest('*[wire\\:id]');
                let componentId = div.attr('wire:id');
                // console.log(componentId);
                let component = window.livewire.find(componentId);
                component.set('body', comment );
            }));
        });
    });

This was it is possible to hide summernote element and show again, it will be automatically initialized again.
p.s.
My input field has name body as you see from the code. And also I am using JQuery…
one missing function:

function debounced(delay, fn) {
        let timerId;
        return function (...args) {
            if (timerId) {
            clearTimeout(timerId);
            }
            timerId = setTimeout(() => {
            fn(...args);
            timerId = null;
            }, delay);
        }
    }

[jorgelt87]

@Dimonka2

function debounced(delay, fn) { let timerId; return function (…args) { if (timerId) { clearTimeout(timerId); } timerId = setTimeout(() => { fn(…args); timerId = null; }, delay); } }

no logro enteder men

[jorgelt87]

Hi friend, how are you? Look, I’m trying to edit a text in summernote but the truth is that it doesn’t give me the result. can you help me ?

[moner]

Please show me your HTML code

[skywalker]

Which HTML code do you mean?

[moner]

I have the same problem with this, When I want to update the post all data are shown in her field but the text area data can not show in her textarea field but the summernot is showing. for this I need help

[skywalker]

Can you show me the code?