laravel - Livewire 和 Summernote - 用于创建但不能编辑

Question

我在 Laravel Livewire 中的 Summernote 遇到了一个非常奇怪的问题......我有一个事件模型，我正在使用 Livewire 组件创建和编辑。对于数据库中的文本字段，我想使用 Summernote 作为所见即所得的编辑器。

当我去创建一个新事件时，一切正常，文本区域转换为 Summernote 所见即所得。当我去编辑现有事件时，文本区域保持为纯文本区域。

以下代码效果很好：

在事件控制器中：

public function create()
{
    $event = new Event();
    $action = 'store';
    return view('admin.events.edit', compact('event', 'action'));
}

在我看来：

@extends('layouts.admin')

@section('title')
    Events
@endsection

@section('content')
    <livewire:event-form :event="$event" :action="$action" />
@endsection

@section('css')
    @livewireStyles
    @include('layouts.includes.css.summernote')
@endsection

@section('js')
    @livewireScripts
    @include('layouts.includes.js.summernote')
@endsection

@section('script')
    @include('admin.events.script')
@endsection

在我的 Livewire 组件中：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class EventForm extends Component
{
    public $event;
    public $action;

    protected $rules = [
        'event.title' => 'required',
        'event.start' => 'date|nullable',
        'event.end' => 'date|nullable',
        'event.location' => 'nullable',
        'event.description' => 'nullable',
        'event.disclaimer' => 'nullable',
    ];

    public function render()
    {
        $event = $this->event;
        return view('livewire.event-form', compact('event'));
    }
}

在我的活动形式中：

<div>
    @if($action == 'store')
        {{ Aire::open()->route('admin.event.store') }}
    @elseif ($action == 'update')
        {{ Aire::open()->route('admin.event.update', $event) }}
    @endif
    <div class="row">
        <div class="col-md-4 order-md-2">
            <div class="card card-outline card-success sticky-top" style="top: 10px">
                <div class="card-header">
                    <h4 class="card-title">Submit</h4>
                </div>
                <div class="card-body">
                    {{ Aire::submit('Submit') }}
                </div>
            </div>
        </div>
        <div class="col-md-8 order-md-1">
            <div id="accordion">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h4 class="card-title w-100">
                            <a class="d-block w-100" data-toggle="collapse" href="#collapseOne">
                                Event Info
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="collapse show" data-parent="#accordion">
                        <div class="card-body">
                            {{ Aire::input('title', 'Event Title')->setAttribute('wire:model.lazy', 'event.title') }}
                            {{ Aire::dateTimeLocal('start', 'Start Time')->setAttribute('wire:model.lazy', 'event.start') }}
                            {{ Aire::dateTimeLocal('end', 'End Time')->setAttribute('wire:model.lazy', 'event.end') }}
                            {{ Aire::input('location', 'Location')->setAttribute('wire:model.lazy', 'event.location') }}
                            {{ Aire::textArea('description', 'Description')->id('description')->setAttribute('wire:model.lazy', 'event.description') }}
                            {{ Aire::textArea('disclaimer', 'Disclaimer')->id('disclaimer')->setAttribute('wire:model.lazy', 'event.disclaimer') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

    </div>
    {{ Aire::close() }}
</div>

以下代码导致没有 WYSIWYG 编辑器：

public function edit(Event $event)
{
    $action = 'update';
    return view('admin.events.edit', compact('event', 'action'));
}

相同的初始视图、相同的 Livewire 组件、相同的表单视图。字面上相同的文件。我不明白是什么导致 Summernote 仅在编辑时无法正确初始化。

标签： laravellaravel-8laravel-livewiresummernote