我有一个问题，如何在所见即所得文本区显示编辑过的文本。它没有显示：（我尝试了summernote和ckeditor，总是一样，它没有显示，显示一个空的文本区。
想法是做一个“模板”编辑器，客户可以在其中制作模板，例如证明他的成员，他们为他工作，因为公共汽车票或类似的东西。所以，我做了一个Liveware组件，显示模板列表，当用户点击列表中的模板时，他们需要获得以前保存的模板，以便他们可以编辑/更改，如果需要更改的东西。但由于某种原因，如果我输入summernote或者ckeditor，我只会得到空的文本区域，而且我找不到发生这种情况的原因。同样的，数据库中也有一些信息。下面是我的组件模板：

<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>

这是Livewire组件代码：

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');
    }
}