Show HN: Edtr.io – Intuitive web editor, open source and fully adaptable(edtr.io)
edtr.io
Show HN: Edtr.io – Intuitive web editor, open source and fully adaptable
https://edtr.io
12 comments
This looks really cool but I think maybe an image on the landing page might help
The entire page is editable and a live demo. It could probably be higher up, but it is mentioned on the page.
> Try for yourself: You may not have noticed, but you are already in edit mode! Just click anywhere in the text to edit
On my screen (1080p) I have to scroll to see this and it's in plain small body text, doesn't stand out at all.
On my screen (1080p) I have to scroll to see this and it's in plain small body text, doesn't stand out at all.
Wow. Ok Thank you. This morning looking at it I was blind to those widgets.
Additionally to the sibling comments: you can also check out the demo at demo.edtr.io that contains way more plugins. It’s pretty much what we use on Serlo.org.
I thought that until I realized that image that's there IS the actual editor
Criticism: Cmd+left/right/up/down doesn't work - instant dealbreaker.
Much other keyboard accessibility is also painfully broken. It’s basically only usable by mouse. Up/Down do the wrong thing almost every time (though within a multi-line paragraph, sometimes they do the right thing, but it’s not consistent).
Getting keyboard navigation reasonably right everywhere will be very difficult. Ironing out the remaining platform differences may be even more difficult.
I also broke it (a nondescript TypeError once, “invariant broken” another time) fairly quickly, by tabbing to the cog thing, Space, tab to the Duplicate button, Space—where clicking didn’t achieve that.
Getting keyboard navigation reasonably right everywhere will be very difficult. Ironing out the remaining platform differences may be even more difficult.
I also broke it (a nondescript TypeError once, “invariant broken” another time) fairly quickly, by tabbing to the cog thing, Space, tab to the Duplicate button, Space—where clicking didn’t achieve that.
Looks good and am glad that editing text works on mobile (so many of these struggle with predictive text, even Google CoLabs's text boxes gets stuck on that)
However when you go to add a hyperlink on mobile, it's not adding it where the cursor is, instead adding it at the start of the current line.
Am seeing this on latest Chrome on Android 10.
However when you go to add a hyperlink on mobile, it's not adding it where the cursor is, instead adding it at the start of the current line.
Am seeing this on latest Chrome on Android 10.
So can I put this on my site to kind of make a cms for my site to add pages or blogs/blog posts etc?
Kinda. You can integrate it into your existing CMS to make the editing (for your end users) easier, especially for “enriched” content (think interactive content, complex layout)
Is it possible to embed the editor on a web page?
Yeah, but it only makes sense to do so on a page that already is using react. If you are using some other JS framework it will add 140kb dep on react+react-dom - which might be a problem (or not depending on your use case).
Definitely a good point. Just wanted to note that you could write a renderer in some server language that outputs static HTML. And only use the editor to make that static content editable (loaded asynchronously or on a different route). The serialized state is easy to parse by design.
That is an excellent idea!
Yes, it’s Backend-agnostic and designed to be embeddable into any web app. It’s basically an editor framework to define your own editor and you write the glue code to your web app.
TBH my suggestion is to work on making this more clear of who it's for. Maybe add a comparison to other current solutions out there, since at first I was a bit confused what it's trying to do. Maybe use like intro.js or something for it.
I was thinking of building something similar. Any other alternatives to similar solutions?
There are LOTS of competitors, but of course, not all are apples to apples.
Here is a partial list of some of the more active wysiwyg editors:
Many of these have active branches, especially in Vue or React etc.
Here is a partial list of some of the more active wysiwyg editors:
Quill: https://quilljs.com
Slate: https://www.slatejs.org
Trumbowyg: https://alex-d.github.io/Trumbowyg
ContentTools: http://getcontenttools.com
SummerNote: https://summernote.org
Squire: https://github.com/neilj/Squire
Editor.js: https://codex.so/editor
ProseMirror: https://prosemirror.net/
Many of these have active branches, especially in Vue or React etc.
Best I could find would be: https://github.com/chanzuckerberg/czi-prosemirror but they kinda stopped working on it.
An example of a library using React and ProseMirror is from Outline, which is switching from Slatejs: https://github.com/outline/rich-markdown-editor/pull/150.
Prosemirror seems to be one of the most pluggable block editors out there. For the vue.js community, tiptap is built on prosemirror. Slate (which this is built on) is good too.
Gutenberg, it can be decoupled from Wordpress. But you can start searching for tinymce alternatives and you will found hundreds
Odoo has a full CMS with advanced page builder: https://www.odoo.com/page/website-builder
Gutenberg https://wordpress.org/gutenberg/
more of a complete CMS but has wysiwyg editing and UI blocks - https://webiny.com
Also to add, we are the only self hosted serverless on the market. So if you want to benefit from the scalability and lower price that aws lambda provides, compared to a traditional VMs, Webiny is the way to go.
Sven, the founder of Webiny here. At the moment we have a drag&drop editor, but we will soon launch a headless offering as well.
So this is built on Slate—what does it bring to the table that you can’t do with Slate out of the box?
Core contributor of Edtr.io here:
Slate works well for editing text. Anything with a more complicated layout / UX gets really messy though, since with Slate, you always have to deal with the DOM / Slate's wrapper around contenteditable. And at least before Slate 0.50+, we (& the developers of Schul-Cloud independently of us) ran always in bugs, etc. This is why Edtr.io (similarly to ReactPages, fka ORY Editor) builds it own state management & layouting outside of Slate. And let Slate do what they do best, editing rich-text.
Slate works well for editing text. Anything with a more complicated layout / UX gets really messy though, since with Slate, you always have to deal with the DOM / Slate's wrapper around contenteditable. And at least before Slate 0.50+, we (& the developers of Schul-Cloud independently of us) ran always in bugs, etc. This is why Edtr.io (similarly to ReactPages, fka ORY Editor) builds it own state management & layouting outside of Slate. And let Slate do what they do best, editing rich-text.
Here's the problem relying on slate (I've used it and all the others [quill, ckeditor, etc etc]) -- you are also relying on Ian Storm Taylor and he's known for going on a streak and re-writing things in a breaking manner. IMO you should just build the entire thing yourself.
> "... and re-writing things in a breaking manner. IMO you should just build the entire thing yourself."
Well that could be said for literally any 3rd party library. New updates may break things, that's why you need to pin the exact version you use to prevent things breaking.
I would rather use a library which has been tested and used by many people, than reinvent the wheel on a bunch of things...
Well that could be said for literally any 3rd party library. New updates may break things, that's why you need to pin the exact version you use to prevent things breaking.
I would rather use a library which has been tested and used by many people, than reinvent the wheel on a bunch of things...
That’s one of the reasons we only rely on Slate for our text plugin. So we could swap Slate for some different rich-text editor in the future if we need to. Though I have to say, we are very happy with Slate.
Nice. I honestly have been looking for something like this for awhile. All the examples I found with slate were either insufficient or outdated (i.e. canner editor) -- and in a focus on speed (being a solo founder), I couldn't compromise. I'm going to try to implement this for my editor on my site. Would be cool to be able to publish content with custom components (closest I could find for CKEditor [which I'm using] is: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/...) -- but the implementation for that is rather clunky (more so on the render side -- e.g. how do I save the data in my database such that I know which components to call? CSS classes? data attributes?) So the underlying structure of having JSON for the data structure with Slate (and now this) gives me more confidence as a dev.
This is really nice. One note: the landing page doesn’t mention the MIT license or commercial use. I had to go to the repo to figure it out.
Would love to look into integrating this editor in our email client. Is there an easy way for us to chat?
Would love to look into integrating this editor in our email client. Is there an easy way for us to chat?
If you're going to use it commercially, don't miss https://grapesjs.com/ It has a much more stable API, UIs and it has an MJML preset. Under a permissive BSD-3 license.
Thanks, I’ll have a look!
Yes, landing page only mentions Open Source, maybe we should clarify that.
You can reach us at [email protected]
You can reach us at [email protected]
Are you on discord or matrix by any chance?
Nope, sorry. If you send us an email, we can work something out :)
~~Why does one have to send an email just to ask about license?~~
Edit: As people had pointed out, that they were asking for chat to integrate it into the email client. Sorry for the confusion.
Edit: As people had pointed out, that they were asking for chat to integrate it into the email client. Sorry for the confusion.
They were sharing their email address because upstream commenter asks "is there a way we can chat?"
As specified in their comment and in our GitHub repository, the code is licensed under MIT.
Not sure how it’s pronounced, `ed-trio`?
What is a “web editor”? Is that establish as terminology for this type of wyswiyg editor?
Does it or doesn’t it support mobile? It mostly doesn’t work but with some fiddly stubbornness I was able to get a few of the controls to do something.
What is a “web editor”? Is that establish as terminology for this type of wyswiyg editor?
Does it or doesn’t it support mobile? It mostly doesn’t work but with some fiddly stubbornness I was able to get a few of the controls to do something.
It’s pronounced Editor IO.
Web editor in the sense that the editor runs as a web app, and the default rendering output is React (although other output formats are possible).
Mobile kinda works (minimum goal is to let users do simple edits from mobile), but we mostly focused on the desktop so far.
Web editor in the sense that the editor runs as a web app, and the default rendering output is React (although other output formats are possible).
Mobile kinda works (minimum goal is to let users do simple edits from mobile), but we mostly focused on the desktop so far.
The "add element" "+" button only sometimes seems to work, and when trying to add a paragraph of text, anything I type is immediately removed.