How to Use Trix Editor With Phoenix LiveView - Revision history

Admin at 20:51, 22 June 2023

2023-06-22T20:51:18Z

← Older revision		Revision as of 20:51, 22 June 2023
Line 76:		Line 76:


			</source>




			<source>

			<%= for id <- 1..5 do %>
			<.modal id={"notes-modal-#{id}"}>
			<div phx-hook="TrixEditor" id="xyz">
			<div id="richtext" phx-update="ignore">
			<form>
			<input id="CONNECTION" value={"notes-modal-#{id}"} type="hidden" name="content" />
			<trix-editor class="trix-content" input="CONNECTION"></trix-editor>
			<.button>Save Changes</.button>
			</form>
			</div>
			</div>
			</.modal>
			<div phx-click={show_modal("notes-modal-#{id}")}>Click item <%= id %></div>
			<% end %>
	</source>		</source>

2023-06-22T18:20:23Z

← Older revision		Revision as of 18:20, 22 June 2023
Line 1:		Line 1:

	{{In_progress}}		{{In_progress}}

			Install the library.

			cd into assets directory and run: '''npm install trix --save'''

			In assets/js/ app.js:

			'''import trix from "trix"
			'''

			In assets/css/app.css

			'''@import '../node_modules/trix/dist/trix.css';'''


	To integrate Trix editor we use a JavaScript Hook		To integrate Trix editor we use a JavaScript Hook

2023-06-21T17:17:20Z

@@ Line 44: / Line 44: @@
        </div>
      </div>
 </source>

2023-06-21T17:16:36Z

← Older revision		Revision as of 17:16, 21 June 2023
Line 11:		Line 11:
	_csrf_token: csrfToken		_csrf_token: csrfToken
	},		},



Line 22:		Line 23:
	this.ele.addEventListener("trix-change", (e) => {		this.ele.addEventListener("trix-change", (e) => {
	console.log(e.target.value)		console.log(e.target.value)
	this.pushEvent('~~zap~~', {		this.pushEvent('transmit-text', {
	payload: e.target.value		payload: e.target.value
	});		});

2023-06-21T17:15:23Z

JavaScript Hook

← Older revision		Revision as of 17:15, 21 June 2023
Line 7:		Line 7:

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


			hooks: {
			TrixEditor: {
			mounted() {

	let ~~liveSocket~~ = ~~new LiveSocket~~("~~/live~~", ~~Socket~~, {		let element = document.querySelector("trix-editor");
	~~params~~: {		this.ele = element
	~~_csrf_token: csrfToken~~		this.ele.value = "data in the value attribute";
	},		this.ele.addEventListener("trix-change", (e) => {
			console.log(e.target.value)
			this.pushEvent('zap', {
			payload: e.target.value
			});
			});

	~~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)~~
	});

	}
	}
	}

	})		})

	</source>		</source>


	==LiveView==		==LiveView==

2023-06-21T16:18:10Z

← Older revision		Revision as of 16:18, 21 June 2023
Line 8:		Line 8:
	<source>		<source>

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

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

			}
	}		}
	}		}
	}

	})		})

2023-06-21T16:17:37Z

← Older revision		Revision as of 16:17, 21 June 2023
Line 16:		Line 16:
	this.ele = element		this.ele = element
	this.ele.value = "data in the value attribute";		this.ele.value = "data in the value attribute";
			this.ele.addEventListener("trix-change", (e) => {
			console.log(e.target.value)
			});


	}		}

2023-06-21T16:08:33Z

← Older revision		Revision as of 16:08, 21 June 2023
Line 9:		Line 9:

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



	hooks:{		hooks:{

2023-06-21T16:08:24Z

2023-06-21T16:05:43Z

← Older revision		Revision as of 16:05, 21 June 2023
Line 13:		Line 13:

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