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

    <%= 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 %>