How to Use Trix Editor With Phoenix LiveView

This page is in progress

To integrate Trix editor we use a JavaScript Hook

JavaScript Hook

let liveSocket = new LiveSocket("/live", Socket, {
   params: {
      _csrf_token: csrfToken
   },

   hooks: {
      TrixEditor: {
         mounted() {
            let element = document.querySelector("trix-editor");
            this.ele = element
            this.ele.value = "data in the value attribute";
            this.ele.addEventListener("trix-change", (e) => {
               console.log(e.target.value)
            });

         }
      }
   }

})

LiveView

    <div phx-hook="TrixEditor" id="xyz">
      <div id="richtext" phx-update="ignore">
        <trix-editor class="trix-content"></trix-editor>
      </div>
    </div>