如何将 froala 编辑器值获取到 livewire 组件

Question

我正在使用 laravel 8 和 livewire。 我想为 livewire 组件 获得 froala editor 价值.

这是我的livewire组件。

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Article;

class CreateArticle extends Component
{
   
    public $title;
  
    public $article;
 

    public function render()
    {
   
        return view('livewire.create-article')
    }

    protected function rules()
    {
        return [
            'title' => 'required',
            'article' => 'required',
        ];
    }

    protected $messages = [
        'title.required' => 'Please enter title.',
        'article.required' => 'Please enter article.',
    ];

   

    public function submit()
    {
        Article::create([
            'title' => $this->title,
            'article' => $this->article,
        ]);
    }
}

这是我的刀片。

<form  wire:submit.prevent="submit">
    <div class="form-group">
        <label for="title">Article Title</label>
        <input type="text" id="title" class="form-control "
            placeholder="Name For New Article" wire:model="title" required>
            @error('title') <span class="text-danger error">{{ $message }}</span> @enderror
    </div>
    <div class="row justify-content-center" wire:ignore>
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <label for="editor">Description</label>
                    <textarea id="editor" cols="30" rows="10" ></textarea>
                    @error('article') <span class="text-danger error">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <h6 class="text-center">
            <button type="submit"
                class="mt-4 text-right btn waves-effect waves-light btn-info">Submit</button>
        </h6>
    </div>
</form>
@push('js')
<script>
 var editor = new FroalaEditor('#editor', {
        // Set the image upload URL.
        imageUploadURL: 'http://i.froala.com/upload'
    });
</script>
@endpush

提交表单时，它返回 null 作为文章值。我该如何解决？有人可以帮忙吗？如何将 froala 编辑器输入的值输入到 livewire 组件。

Answer 1

我找到了解决方案，你需要声明你的 froala-editor，通过在 AlpineJS 中使用 x-data 和 x-init 标签。

<form  wire:submit.prevent="submit">
    <div class="form-group">
        <label for="title">Article Title</label>
        <input type="text" id="title" class="form-control "
            placeholder="Name For New Article" wire:model="title" required>
            @error('title') <span class="text-danger error">{{ $message }}</span> @enderror
    </div>
    <div class="row justify-content-center" wire:ignore>
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <label for="editor">Description</label>
                    <textarea 
                    x-data="{ article: @entangle('article').defer }" 
                    x-init="
                    new FroalaEditor($el, {
                        imageUploadURL: 'http://i.froala.com/upload', 
                        events: { 
                            'contentChanged': function () { 
                                article = this.html.get(); 
                            }, 
                        } 
                    });" 
                    id="editor" wire.model.defer="article" cols="30" rows="10" ></textarea>
                    @error('article') <span class="text-danger error">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <h6 class="text-center">
            <button type="submit"
                class="mt-4 text-right btn waves-effect waves-light btn-info">Submit</button>
        </h6>
    </div>
</form>

现在可以获取文章的价值了