6

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?

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>

I have tried

  • wire:model on the hidden input -- nothing happens
  • x-on:trix-change="$set('comment', $event.target.innerHTML) -- this works, but Trix goes grey and ceases to work after the first keypress (reboot problem?)

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?

4
  • Did you figure this out? Trying to integrate trix with livewire now and running into similar problems. Thanks.
    – Clay
    Commented Apr 5, 2020 at 4:05
  • @Clay not yet! Star / upvote it to keep an eye on it :) I'll post any answers back here if I find them.
    – Elliot
    Commented Apr 5, 2020 at 4:32
  • @Clay if you only need one item on a page, then this works: gist.github.com/tanthammar/20a70865415f9f84ec4cca054f3b8396
    – Elliot
    Commented May 13, 2020 at 10:23
  • Hi @Clay - there's now a working answer below! I think Livewire has had some updates, as this was much easier to get going than I recall.
    – Elliot
    Commented May 14, 2020 at 11:30

4 Answers 4

16

I got it working. With up to date Livewire and Alpine installations, the code is roughly as follows.

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

Why does this work?

  • 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.
  • The alpine event ensures that Trix events (like bold, italics etc) are still fired

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!

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

7
  • 1
    Thanks for the follow up. Will be trying this out over the weekend. Also, Caleb is about to release a few Screencasts covering this exact thing.
    – Clay
    Commented May 15, 2020 at 14:54
  • @Kurucu This seems to work very well. But when I apply styles like li or bold it doesnt retain in the wire:model. Ex: <div>foo<br>bar<br>foobar</div> I applied the Bullets here the tags are missing. Did you face this issue?
    – Rehan
    Commented May 20, 2020 at 0:16
  • @Rehan I’ve not seen this. Have you checked the DB? do you have any filters installed?
    – Elliot
    Commented May 20, 2020 at 12:41
  • @Clay if you’re a sponsor - I don’t think they’re going to be free! Hopefully fixed anyway 🙂
    – Elliot
    Commented May 20, 2020 at 12:42
  • 1
    you save my life . i has been tried more then 1 week. but no solution.
    – md alam
    Commented Sep 11, 2021 at 9:36
6

As an extension on @Kurucu 's answer, and the comment under it from @Rehan;

This seems to work very well. But when I apply styles like li or bold it doesnt retain in the wire:model. Ex: <div>foo<br>bar<br>foobar</div> I applied the Bullets here the tags are missing. Did you face this issue? – Rehan

To fix the issue of not having an updated value when pressing buttons bold, italic, or quote for example, add the following part to the trix editor (note the 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>
1
  • Thanks a lot - I was stuck at the above issue and this did the trick!
    – Dixit
    Commented Jan 21, 2022 at 4:26
1

The above option works but wasn't getting the data back from my field, Here's what worked for me with a little tweak using AlpineJS's @entangle. Below is my working solution:

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

I got it to work by using Trix's built-in events.

<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>
1
  • This might become hard to replicate if you have lots of editors on the screen at once?
    – Elliot
    Commented May 13, 2020 at 10:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.