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>