How to Use Trix Editor With Phoenix LiveView: Difference between revisions
From ElixirBlocks
(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:{ | |||
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>