How to Use Trix Editor With Phoenix LiveView

This page is 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

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)
                    this.pushEvent('transmit-text', {
                        payload: 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>

Elixir Module Code

  def handle_event("transmit-text", params, socket) do
    # Create  Record
    IO.inspect(params)

    {:noreply, socket}
  end