Trix toolbar not working at all.
A1Gard opened this issue · 6 comments
Hello
Thanks for developing this package.
I seen editor but not work.
Usage information:
te7a-houdini/laravel-trix 2.0.1
laravel/framework 7.10.3
Any error in browser console.
An investigation:
when I comment this line everything gone fine:
window.$ = window.jQuery = require('jquery');
What's problem with jquery?
Same issue here. Toolbar buttons don't work and there are no errors in the console.
@A1Gard Have you found a fix for this issue?
@A1Gard am not sure why this problem happened with jquery
@kiritokatklian is it happening with you also using jquery ?
@Te7a-Houdini I'd say no. It's definitely being used through Bootstrap, but in my case commenting it out doesn't fix the issue.
One thing I noticed is that on the Trix website the trix-toolbar tag has event listeners attached to it, but the one on my website doesn't have any event listeners.
So I was able to get it to work after commenting out axios, which apparently was preventing Trix from adding event listeners to the trix-toolbar element.
I tried to investigate what's causing the issue on axios side, but unfortunately I couldn't find anything.
@Te7a-Houdini So I've been playing around with Trix again and found out that it doesn't work well with VueJS. I'm assuming it's because they both listen to DOM changes. When you intentionally cause an error in VueJS (so it doesn't execute properly), Trix works perfectly.
To fix this issue and have both working trix.js needs to execute after VueJS has executed by adding the defer attribute to the trix.js script and including @trixassets after your app.js (or wherever VueJS is imported). PR #36 addresses this issue.