有没有正确的方法将 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>

我试过了

• 隐藏输入上的线：模型 - 没有任何反应
• 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的工作同样，描述在这里。

Answer 2

作为 @Kurucu 答案的扩展，以及 @Rehan 的评论；

\n

\n

这看起来效果很好。但是当我应用像 li 或粗体这样的样式时，它不会保留在电线中：模型中。例如：\n<div>foo<br>bar<br>foobar</div>我在此处应用了项目符号，但缺少标签。您遇到过这个问题吗？\xe2\x80\x93 雷汉

\n

\n

要解决按下粗体、斜体或引号按钮时没有更新值的问题，请将以下部分添加到 trix 编辑器（请注意x-on:trix-change="$dispatch('input', event.target.value)"）：

\n

<div wire:ignore>\n    <trix-editor\n        class="formatted-content"\n        x-data\n        x-on:trix-change="$dispatch('input', event.target.value)"\n        wire:model.debounce.1000ms="newCommentText"\n        wire:key="uniqueKey"\n    ></trix-editor>\n</div>\n

\n