Does anyone have good suggestions for HTML editors which integrate nicely into Phoenix Liveview?
I am especially interested in the inline editing of forms.
Think Wordpress Gutenburg type UX
4 Likes
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.
1 Like
I don’t watched but it has this conference talking about the editors in PHX LiveView:
In home I will watch.
1 Like
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
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>
18 Likes
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";
2 Likes
and for the upload of the images you do something?
1 Like
You mean for the user to upload images within the content? We don’t allow that so I can’t help with it, but their docs covers the subject: GitHub - basecamp/trix: A rich text editor for everyday writing.
