是否有使用Livewire连接Trix编辑器的正确方法? [英] Is there a proper way to wire up Trix editor with Livewire?

问题描述

在将Trix编辑器内容与Livewire连接在一起时，我遇到了麻烦.我认为问题在于，当Livewire从Trix接收内容时，内容被换出，并且Trix被禁用.有更好的方法吗?

When wiring together Trix editor content with Livewire, I am stumbling into problems. I believe that the issue is that when Livewire receives content from Trix, the content is swapped out and Trix becomes disabled. Is there a better way?

我所做的工作如下.目前，该页面被重定向到自身以重新启动 Trix(击败了 Livewire 的全部内容，但它也被用于其他用途).

What I have done, that works, is as follows. At the moment, the page is the redirected to itself in order to reboot Trix (defeating the whole point of Livewire, but it's being used for other things too).

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

我尝试过

• wire:model隐藏的输入上-没有任何反应
• x-on:trix-change ="$ set('comment'，$ event.target.innerHTML)-可行，但是Trix变灰并且在第一次按键后停止工作(重启问题?)

我敢肯定，后者会更好，但是每次都以某种方式重新启动Trix.一切似乎都有些混乱-问题是，执行此操作的正确方法是什么?

I'm sure something like the latter is better, but with Trix somehow being rebooted each time. It all seems a bit messy - so the question is, what's the right way to do this?

推荐答案

我知道了.您可能需要使用Livewire的最新版本才能使其正常工作，但是代码大致如下.

I got it working. You probably need a recent version of Livewire to get this to work, but the code is roughly as follows.

    <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对其进行跟踪.
• 我建议进行长时间的反跳，这是一个hack，因为 .lazy 修饰符不适用于文本.另外，每次按键都需要等待Ajax的痛苦.

• You need wire:ignore on the parent node, because Trix inserts the toolbar above the text area. wire:ignore stops Livewire from worrying about it and therefore not removing it or messing with it on the next cycle.
• You need a wire:key because the DOM moves around a bit, and this helps Livewire to keep track of it.
• I propose the long debounce, which is a hack as the .lazy modifier doesn't work well with text. Also, waiting for Ajax on each key press is painful.

就是这样.我在上面使用了此选项，将评论重复地提交到评论流的末尾，并且一切似乎都正常进行.祝你好运！

That's it. I use this above to repetitively submit comments onto the end of a comment stream, and everything seems to work fine. Good luck!

请注意，我也让CKEditor以类似方式工作，如

Note, I also have CKEditor working similarly, as described here.

这篇关于是否有使用Livewire连接Trix编辑器的正确方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！