时间戳

首页 > 解决方案 > Trix editor 为什么工具栏在编辑器模糊时消失？

laravel - Trix editor 为什么工具栏在编辑器模糊时消失？

问题描述

我尝试在 Laravel8 livewire 中使用 trix 编辑器。我可以设法让它工作，但有一点很烦人。我使用插入到 Post 组件中的 trix livewire 组件。建议我使用 trix-blur 事件来保存编辑器的内容。这非常有效，我可以使用存储按钮将矩阵编辑器组件的值保存在数据库的帖子记录中。恼人的一点是，当trix-blur事件发生时，即使编辑器重新获得焦点，工具栏也会消失，再也不会出现。因此用户不能再使用它。我能做些什么来防止这种行为。

这是 trix 组件

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Trix extends Component
{

    public $value;
    public $trixId;
    const EVENT_VALUE_UPDATED = 'trix_value_updated';

    public function mount($value = ''){
        $this->value = $value;
        $this->trixId = 'trix-' . uniqid();
    }

    public function render()
    {
        return view('livewire.trix');
    }
    public function updatedValue($value){
     $this->emit(self::EVENT_VALUE_UPDATED, $this->value);
}
}

及其观点

<div>

    <input id="{{ $trixId }}" type="hidden" name="content" value="{{ $value }}">
    <trix-editor wire:ignore class="text-white" input="{{ $trixId }}"></trix-editor>

</div>
<script>
    var trixEditor = document.getElementById("{{ $trixId }}")

    addEventListener("trix-blur", function(event) {
        @this.set('value', trixEditor.getAttribute('value'))
    })
  
</script>

这是帖子视图的相关部分

<div>

    <div class="button-line flex flex-row">
        <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
            <button  wire:click.prevent="store()" id="submit" type="button" class="button-register">
                Enregistrer l'info-lettre
            </button>
        </span>
        <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
            <button  wire:click="closeModalPopover()" type="button" class="button-cancel">
                Abandonner
            </button>
        </span>
    </div>
@livewire('trix',['value'=>$body])

</div>

标签： laravellaravel-livewiretrix

解决方案

我终于在这里找到了答案 https://devdojo.com/tnylea/laravel-livewire-trix-editor-component

答案在奖金部分的最后。请注意，只有 trix 编辑器输入必须有一个 wire:ignore 以及它周围的 div

<div wire:ignore>

    <input id="{{ $trixId }}" type="hidden" name="content" value="{{ $value }}">
    <trix-editor wire:ignore class="text-white" input="{{ $trixId }}"></trix-editor>

</div>

推荐阅读