Trix编辑器为什么工具栏在编辑器模糊上消失?

Question

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

这里是trix分量

<?php
namespace AppHttpLivewire;
use LivewireComponent;
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>

这里是post视图的相关部分

<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>

Answer 1

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

答案在最后的Bonus部分。注意，只有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>