Блог

Главная - Вопросы по программированию - Редактор Trix Как получается, что панель инструментов исчезает при размытии редактора?

Редактор Trix Как получается, что панель инструментов исчезает при размытии редактора?

#laravel #laravel-livewire #trix

Вопрос:

Я пытаюсь использовать редактор trix в Laravel8 livewire. Я мог бы заставить его работать, но есть один момент, который очень раздражает. Я использую компонент trix livewire, который вставляется в компонент Post. Мне предлагается использовать событие trix-blur для сохранения содержимого редактора. Это отлично работает, и я могу использовать кнопку «Сохранить», чтобы значение компонента редактора trix было сохранено в записи post в базе данных. Раздражает то, что при возникновении события trix-размытия панель инструментов исчезает и больше никогда не появляется, даже если редактор восстановит фокус. Таким образом, пользователь больше не может им пользоваться. Что я могу сделать, чтобы предотвратить такое поведение.

вот компонент 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>

и вот соответствующая часть представления поста

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

Ответ №1:

Я наконец-то нашел ответ здесь https://devdojo.com/tnylea/laravel-livewire-trix-editor-component

Ответ находится в конце Бонусной части. Примечание. только входные данные редактора trix должны иметь провод:игнорировать, но также и 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>
Метки: ,