Есть ли правильный способ подключить редактор Trix к Livewire? - PullRequest
Новая
       53

Есть ли правильный способ подключить редактор Trix к Livewire?

0 голосов
/ 05 марта 2020

При соединении контента редактора Trix с Livewire я сталкиваюсь с проблемами. Я считаю, что проблема в том, что когда Livewire получает контент от Trix, он выгружается, и Trix отключается. Есть ли лучший способ?

То, что я сделал, это работает, заключается в следующем. На данный момент страница перенаправлена ​​на себя, чтобы перезагрузить Trix (победив весь смысл Livewire, но он также используется для других целей). 

<div>
  <input
      id="newCommentTextTrixContent"
      type="hidden"
      wire:model="newCommentText"
  >

  <trix-editor
      id="newCommentTextTrixEditor"
      input="newCommentTextTrixContent"
  ></trix-editor>


  <button wire:click="addComment(document.getElementById('newCommentTextTrixEditor').innerHTML)">Add Comment</button>
</div>

Я пробовал

  • провод: модель на скрытом входе - ничего не происходит
  • x-on: trix- change = "$ set ('comment', $ event.target.inner HTML) - это работает, но Trix становится серым и перестает работать после первого нажатия клавиши (проблема с перезагрузкой?)

Я уверен, что что-то вроде последнего лучше, но с Trix каким-то образом каждый раз перезагружается. Все это выглядит немного грязно - поэтому вопрос в том, как правильно это сделать?

1 Ответ

0 голосов
/ 20 апреля 2020

Я получил его, используя встроенные события Trix. 

<input id="about" name="about" type="hidden" value="{{ $about }}">
<trix-editor input="about" class="wysiwyg-content"></trix-editor>

<script>
    var about = document.getElementById("about")

    addEventListener("trix-change", function(event) {
        console.log(about.getAttribute('value'));
        @this.set('about', about.getAttribute('value'))
    })
</script>
...