How to Use Trix Editor With Phoenix LiveView: Difference between revisions

From ElixirBlocks
Jump to: navigation, search
(Created page with " {{In_progress}} To integrate Trix editor we use a JavaScript Hook ==JavaScript Hook == <source> 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"; } } } }) </source> ==LiveView== <source> <div ph...")
 
No edit summary
Line 13: Line 13:


hooks:{
hooks:{
TrixEditor:{
  TrixEditor:{
mounted(){
mounted(){
                     let element = document.querySelector("trix-editor");
                     let element = document.querySelector("trix-editor");

Revision as of 16:05, 21 June 2023

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

			}
		}
	}





})


LiveView


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