Trix with Tribute.js

Trix and Tribute.js

Trix is one of the WYSIWYG HTML editors used widely in web development. It has a simple and effective interface. We integrate Trix with Laravel, Livewire and Alpine.js. Moreover, I have encountered a use case for Trix editor to enable mentions just like in Twitter (when you type @ it will suggest some options). Trix editor does not have this feature by default. We will pull in another library called Tribute.js and extend the Trix editor to support mentions.

Integrate Trix

Let us build a plain blade component, once all done we can integrate it with Livewire easily. A blade component can be used even without livewire.