trix - 有没有正确的方法将 Trix 编辑器与 Livewire 连接起来？

Question

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

我试过了

隐藏输入上的线:模型 - 没有任何 react

x-on:trix-change="$set('comment', $event.target.innerHTML) -- 这有效，但 Trix 在第一次按键后变灰并停止工作(重启问题？)

我敢肯定像后者这样的东西更好，但是每次都以某种方式重新启动 Trix。这一切似乎有点困惑 - 所以问题是，这样做的正确方法是什么？

Answer 1

我让它工作了。您可能需要最新版本的 Livewire 才能使其工作，但代码大致如下。

    <div wire:ignore>
        <trix-editor
            class="formatted-content"
            x-ref="trix"
            wire:model.debounce.999999ms="newCommentText"
            wire:key="uniqueKey"
        ></trix-editor>
    </div>

为什么这样做？

您需要 wire:ignore在父节点上，因为 Trix 在文本区域上方插入工具栏。 wire:ignore阻止 Livewire 担心它，因此不会在下一个周期中删除它或弄乱它。

您需要一个 wire:key 因为 DOM 会移动一点，这有助于 Livewire 跟踪它。

我建议长时间去抖动，这是一个黑客 .lazy修饰符不适用于文本。此外，在每次按键时等待 Ajax 是痛苦的。

就是这样。我使用上面的这个重复提交评论到评论流的末尾，一切似乎都很好。祝你好运!

请注意，我也有类似的 CKEditor 工作方式，如 here 所述.