Summernote or any other wygiwys in laravel liveware that will show text in textarea :(

Question

I have a question and problem with how to show edited text in WYSIWYG textarea. It didn't show up :( I tried with summernote and ckeditor and always the same, it didn't show up and shows an empty textarea.

Idea is to make a "template" editor where the customer can make a template for example proof for his member that they work for him because of bus tickets or something like that. So, I made a Liveware component that shows up list of templates and when users click on a template from the list they will need to get the previously saved template so they can edit/change if needs something to change. But for some reason, I get only empty textarea if I put summernote or ckeditor and I can't find a reason why that happened. The same is in the database had some info or not. Here is my component template:

<div>
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <label class="block text-sm">
        <span class="text-gray-700 dark:text-white">{{__('site.team_member_document.document_type')}}</span>
        <select class="block w-full mt-1 text-sm"
                name="team_member_document_type_id" id="team_member_document_type_id"
                wire:model="team_member_document_type_id" wire:change="onChangeDocumentType()">
            <option value="">{{__('site.team_member_document.select_document_type')}}</option>
            @foreach($document_types as $item)
                <option value="{{$item['id']}}"
                        @if(old('team_member_document_type_id')==$item['id']) selected @endif
                >{{$item['name']}}</option>
            @endforeach
        </select>
    </label>
    <label class="block text-sm" wire:ignore>
        <span class="text-gray-700 dark:text-white">{{__('site.team_member_document.template')}}</span>
        <textarea name="template" id="template" wire:model.defer="template">{{ $template }}</textarea>
    </label>
    <label class="block mt-4 text-sm">
        <button type="button" wire:click="submitForm()"
                class="px-4 py-2 text-sm font-medium">
            {{__('site.save')}}
        </button>
        <a href="{{route('team_member_document.index')}}"
           class="px-4 py-2 text-sm font-medium">
            {{__('site.cancel')}}
        </a>
    </label>
</div>

<script>
    $(function () {
        $('#template').summernote({
            placeholder: '',
            height: 300,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview']]
            ],
            callbacks: {
                onChange: function (contents, $editable) {
                    @this.set('template', contents);
                }
            }
        });
    })
</script>

and here is Livewire component code:

namespace App\Http\Livewire;

use Livewire\Component;

class TeamMemberDocumentTemplate extends Component
{
    public $document_types;
    public $team_member_document_type_id;
    public $template;


    protected array $rules = [
        'template' => 'required|min:30',
    ];

    public function mount($document_types)
    {
        $this->template = '';
        $this->document_types = $document_types;
    }

    public function render()
    {
        return view('livewire.team-member-document-template');
    }

    public function onChangeDocumentType()
    {
        $this->template = $this->document_types->filter(function ($item) {
            return ($this->team_member_document_type_id == $item->id);
        })->first()->template ?? '';
    }

    public function submitForm()
    {
        $this->validate();

        $document_type = $this->document_types->filter(function ($item) {
            return ($this->team_member_document_type_id == $item->id);
        })->first();
        $document_type->update([
            'template' => $this->template
        ]);

        return redirect()->route('team_member_document.index');
    }
}

Answer 1

When adding this part of the code into livewire.team-member-document-template.blade.php all works well:

When adding this part of the code into livewire.team-member-document-template.blade.php all works well:

<script> $(function () { $('#summernote_small').on('summernote.change', function (we, contents, $editable) { @this.set('print_note', contents); }); }) </script>