Laravel Livewire集成CKEditor提交表单时出现Undefined variable $_instance错误

我在给添加文章的表单集成CKEditor编辑textarea内容时，提交表单出现错误：Undefined variable $_instance。未集成CKEditor时表单能正常工作。

初始化CKEditor的代码 #

<script src="ckeditor/ckeditor.js">
    ClassicEditor
        .create(document.querySelector('#post_content'))
        .then(editor=>{
            editor.model.document.on('change:data',(e)=>{
                @this('post_content').set('post_content', e.editor.getData());
            });
        })
    .catch(error=>{
        console.error(error);
    });
</script>

表单代码 #

<form wire:submit.prevent="addNewPost()" method="post" id="createPostForm" enctype="multipart/form-data">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-9">
                    <div class="mb-3">
                        <label for="" class="form-label">
                            Titlu
                        </label>
                        <input type="text" wire:model="post_title" name="post_title" class="form-control" placeholder="Titlul articolului" value="{{old('post_title')}}">
                        <span class=" text-danger ">@error('post_title') {{$message}}@enderror</span>
                    </div>
                    <div wire:ignore class="mb-3">
                        <label for="" class="form-label">
                            Continutul articolului
                        </label>
                        <textarea wire:model="post_content" class="ckeditor form-control" id="post_content" name="post_content" cols="30" rows="10" >{{$post_content}}</textarea>
                        <span class="text-danger">@error('post_content'){{$message}}@enderror</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <div class="form-label">
                            Categoria articolului
                        </div>
                        <select wire:model="post_category" name="post_category" id="" class="form-select">
                            <option value="">--Nu ati ales nimic--</option>
                            @foreach (\App\Models\SubCategory::all() as $category)
                                <option value="{{$category->id}}">{{$category->subcategory_name}}</option>
                            @endforeach
                        </select>
                        <span class="text-danger">@error('post_category'){{$message}}@enderror</span>
                    </div>
                    <div class="mb-3">
                        <div class="form-label">
                            Imaginea articolului
                        </div>
                        <input type="file" wire:model="post_image" name="post_image" class="form-control">
                        <span class="text-danger ">@error('post_image'){{$message}}@enderror</span>
                    </div>
                    <div class="image-holder mb-2" style="max-width: 250px;">
                        <img src="" alt="" class="img-thumbnail" id="image-previewer" data-ijabo-default-img=''>
                    </div>
                    <button type="submit" id="sub" class="btn btn-primary">Salveaza</button>
                </div>
            </div>
        </div>
    </div>
</form>

Posts组件代码 #

<?php

namespace App\Http\Livewire;

use App\Models\Post;
use Livewire\Component;
Use Livewire\WithFileUploads;
use App\Traits\ShowToastrTrait;

class Posts extends Component
{
    use withFileUploads;
    use showToastrTrait;

    public $post_title, $post_content,  $post_category,  $post_image;
    protected $rules = [
        'post_title' => 'required|unique:posts,post_title|max:255',
        'post_content' => 'required',
        'post_image' => 'required|mimes:jpeg,png,jpg,gif,svg|max:2048',
        'post_category' => 'required'];

    protected $messages = [
        'post_title.required' => 'Introduceti titlul articolului',
        'post_title.unique' => 'Exista deja un asemenea titlu',
        'post_content.required' => 'Introduceti continutul articolului',
        'post_image.required' => 'Atasati o imagine articolului',
        'post_image.mimes' => 'Imaginea trebuie sa fie in format jpeg/png/jpg/gif/svg',
        'post_category.required' => 'Selectati categoria articolului',
    ];
    public function addNewPost(){
        dd($this);
            $this->validate();
            $post = Post::addNewPost($this);
            if(!$post){
                $this->showToastr('Articolul nu a putut fi adaugat','error');
            }
            $this->showToastr('Articolul a fost adaugat cu succes','success');
            $this->reset();
    }
    public function render()
    {
        return view('livewire.posts');
    }
}

出现Undefined variable $_instance错误的核心原因是CKEditor初始化代码里的Livewire语法错误，以及部分配置冲突。

1. 修正CKEditor的Livewire同步逻辑 #

原代码中@this('post_content').set(...)是错误的Livewire语法，且不需要通过e.editor获取编辑器实例，直接使用回调里的editor变量即可。修正后的初始化代码：

<script src="ckeditor/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#post_content'))
        .then(editor => {
            editor.model.document.on('change:data', () => {
                @this.set('post_content', editor.getData());
            });
        })
        .catch(error => {
            console.error(error);
        });
</script>

2. 移除表单原生提交属性 #

Livewire表单不需要原生的method="post"属性，保留会引发冲突，修改表单开头：

<form wire:submit.prevent="addNewPost()" id="createPostForm" enctype="multipart/form-data">

3. 修复组件提交方法 #

移除dd($this);语句，否则代码会中断在调试步骤，无法执行后续验证和保存逻辑：

public function addNewPost(){
    $this->validate();
    $post = Post::addNewPost($this);
    if(!$post){
        $this->showToastr('Articolul nu a putut fi adaugat','error');
        return;
    }
    $this->showToastr('Articolul a fost adaugat cu succes','success');
    $this->reset();
}

额外注意事项 #

• 确保CKEditor的资源路径正确，ckeditor/ckeditor.js能正常加载。
• 如果组件存在动态重新渲染的场景，建议通过Livewire事件触发CKEditor初始化，避免编辑器失效：
  在组件中添加方法：

  public function initEditor()
  {
      $this->dispatchBrowserEvent('init-ckeditor');
  }
  

  模板中绑定初始化事件：

  <div wire:init="initEditor">
      <textarea wire:model="post_content" class="ckeditor form-control" id="post_content" name="post_content" cols="30" rows="10" >{{$post_content}}</textarea>
  </div>
  

  最后修改CKEditor初始化代码为监听事件：

  <script>
      window.addEventListener('init-ckeditor', () => {
          ClassicEditor
              .create(document.querySelector('#post_content'))
              .then(editor => {
                  editor.model.document.on('change:data', () => {
                      @this.set('post_content', editor.getData());
                  });
              })
              .catch(error => {
                  console.error(error);
              });
      });
  </script>
  

内容的提问来源于stack exchange，提问作者sdblog 22