WYSIWIG HTML editors for Phoenix LiveView?

maybe this Dev Community - DevDojo

Never used.

I’m currently working on adding Editor.js to Keila (see e.g. here). The concept is similar to the Gutenberg editor, although the UI is not quite as smooth yet. It is, however, very easy to work with.

If you really like Gutenberg, you might actually be able to use it in your Phoenix project. Check out the work of the Drupal Gutenberg project, g-editor, and this other standalone version which use Gutenberg without Wordpress.

I don’t watched but it has this conference talking about the editors in PHX LiveView:

In home I will watch.

repo here: GitHub - begedin/philtre: A block-based content editor in elixir · GitHub

thank you gentlemen, I’ll check out these (I’ve looked at editor.js and I love the experience, but I don’t want to parse JSON or diffs) and want to use Elixir Phoenix Live View primitives as much as possible

We’ve been using https://trix-editor.org with a Hook without issues so far.

Could you show how was the installation with hook using Trix?

The hook:

import Trix from "trix";

export default {
  mounted() {
    const element = document.querySelector("trix-editor");
    element.editor.element.addEventListener("trix-change", (e) => {
      this.el.dispatchEvent(new Event("change", { bubbles: true }));
    });
    element.editor.element.addEventListener("trix-initialize", () => {
      element.editor.element.focus();
      var length = element.editor.getDocument().toString().length;
      window.setTimeout(() => {
        element.editor.setSelectedRange(length, length);
      }, 1);
    });
    this.handleEvent("updateContent", (data) => {
      element.editor.loadHTML(data.content || "");
    });
  },
};

(the hook can be simplified, I use the setTimeout because in one of my forms there’s an auto-save feature that sends an event to the LV after a given period of time and if the user is typing on the editor while the auto-save event fires the cursor was being reset to the beginning of the text, this works around it)

The HTML:

      <div>
        <%= label(f, :body, gettext("Body")) %>
        <%= hidden_input(f, :body, phx_hook: "TrixEditor") %>
        <div id="richtext" phx-update="ignore">
          <trix-editor input={input_id(f, :body)} class="trix-content">
          </trix-editor>
        </div>
        <%= error_tag(f, :body) %>
      </div>

thank you for share @shamanime.
And another question.
For the upload of the image files you do something?
You preferred to use the installation by npm or including it from an npm CDN in the <head> of your page?

We installed from npm and the only configuration we have is in our app.css:

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