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>