5

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

我试过了

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

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

4

4 回答 4

11

我让它工作了。使用最新的 Livewire 和 Alpine 安装，代码大致如下。

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

为什么这行得通？

  • 您需要wire:ignore在父节点上，因为 Trix 在文本区域上方插入工具栏。wire:ignore阻止 Livewire 担心它，因此不会在下一个周期将其移除或弄乱它。
  • 你需要一个 wire:key 因为 DOM 会移动一点，这有助于 Livewire 跟踪它。
  • 我建议使用长去抖动，这是一种 hack，因为.lazy修饰符不适用于文本。此外，在每次按键时等待 Ajax 是很痛苦的。
  • alpine 事件确保 Trix 事件（如粗体、斜体等）仍然被触发

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

请注意，我也有 CKEditor 类似地工作，如此处所述。

于 2020-05-14T11:29:03.503 回答
5

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

这似乎工作得很好。但是当我应用像 li 或粗体这样的样式时，它不会保留在 wire:model 中。例如： <div>foo<br>bar<br>foobar</div>我在这里应用了子弹，但标签丢失了。你遇到过这个问题吗？——热汗

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

<div wire:ignore>
    <trix-editor
        class="formatted-content"
        x-data
        x-on:trix-change="$dispatch('input', event.target.value)"
        wire:model.debounce.1000ms="newCommentText"
        wire:key="uniqueKey"
    ></trix-editor>
</div>
于 2020-07-09T16:17:51.637 回答
1

上面的选项有效，但没有从我的领域取回数据，这是对我有用的，使用AlpineJS's @entangle. 以下是我的工作解决方案：

<div class="mb-2" x-data="{ description: @entangle('description').defer }"

             x-init="$watch('description', function (value) {
                        $refs.trix.editor.loadHTML(value)
                        var length = $refs.trix.editor.getDocument().toString().length
                        $refs.trix.editor.setSelectedRange(length - 1)
                        }
                    )" wire:ignore>

            <label class="form-label">Job Description <span class="text-danger">*</span></label>
            @error('description')
            <span class="error d-inline-block"><i class="mdi mdi-alert-circle"> </i> {{$message}}</span>
            @enderror
            <input name="description" id="description" type="hidden" x-model="description">
            <div x-on:trix-change.debounce.1000ms="description = $refs.trix.value">
                <trix-editor x-ref="trix" input="description" class="overflow-y-scroll"
                             style="height: 20rem;"></trix-editor>
            </div>
        </div>
于 2021-07-09T11:20:51.610 回答
0

我通过使用 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>
于 2020-04-20T20:35:36.307 回答