laravel - 未定义的变量：_instance - 带有 laravel livewire 的 Summernote 编辑器

问题描述

我正在尝试将 Summernote 编辑器与 laravel livewire 一起使用。我得到以下错误

试图获取非对象的属性“id”（查看：/.../resources/views/layouts/app.blade.php）

window.livewire.find('<?php echo e($_instance->id);? >').set('description', contents);

布局

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

    @livewireStyles

</head>
<body>
<div class="min-h-screen bg-gray-100">
    <main>
        {{ $slot }}
    </main>
</div>

@stack('modals')

@livewireScripts

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.js" defer></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

    <script type="text/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);
                }
            }
        });
    </script>
</body>
</html>

<div class="col-md-12">
    <div class="form-group" wire:ignore>
        <label for="description">Description</label>
        <textarea class="form-control summernote" wire:model="description">{{ $description }}</textarea>
    </div>
</div>

我做错了什么？我在第一次渲染时遇到了这个错误。如果我删除 onchange 功能，页面正在加载。但我无法保存 Summernote 编辑器的值

更新

<?php

namespace App\Http\Livewire\Posts;

use App\Models\Posts;
use App\Models\Categories;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;

class Create extends Component
{
    public $title, $description;

    public function render()
    {
        return view('livewire.posts.create');
    }

    protected $rules = [
        'title'   => 'required|max:200',
        'description'   => 'required',
    ];

    public function updated($title)
    {
        $this->validateOnly($title);
    }

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

        Posts::create([
            'title' => $this->title,
            'detail' => $this->description,
        ]);

        redirect()->route('posts');
    }
}

查看：livewire.posts.create

<div>
    <div class="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8">
        <div class="mt-10 sm:mt-0">
            <div class="md:grid md:grid-cols-3 md:gap-6">
                <div class="mt-5 md:mt-0 md:col-span-3">
                    <form wire:submit.prevent="store">
                        <div class="shadow overflow-hidden sm:rounded-md">
                            <div class="px-4 py-5 bg-white sm:p-6">
                                <div class="grid grid-cols-6 gap-6">
                                    <div class="col-span-12 sm:col-span-12 lg:col-span-6">
                                        <x-input.group label="Title" for="title" :error="$errors->first('title')">
                                            <x-input.text wire:model.defer="title" id="title" />
                                        </x-input.group>
                                    </div>

                                    <div class="col-span-12 sm:col-span-12 lg:col-span-6" wire:ignore>
                                            <textarea class="form-control summernote" wire:model="description">{{ $description }}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                                <button type="submit">
                                    Save
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

标签： laravelsummernotelaravel-livewire

laravel - 未定义的变量：_instance - 带有 laravel livewire 的 Summernote 编辑器

问题描述

解决方案

推荐阅读