
Show HN: Edtr.io – Intuitive web editor, open source and fully adaptable - SplishCrew
https://edtr.io
======
leshokunin
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?

~~~
tmikaeld
If you're going to use it commercially, don't miss
[https://grapesjs.com/](https://grapesjs.com/) It has a much more stable API,
UIs and it has an MJML preset. Under a permissive BSD-3 license.

~~~
leshokunin
Thanks, I’ll have a look!

------
mkl
Some bugs I spotted relating to the gear settings interface: Some bits of the
interface seem to be in German. E.g. click on a paragraph of text and hover
over or click the gear icon. The modal from clicking the gear also has two
separate close buttons. Changing the icons of the Experience points doesn't
seem to work, and nor does duplicate/remove.

The "add element" "+" button only sometimes seems to work, and when trying to
add a paragraph of text, anything I type is immediately removed.

------
raidicy
This looks really cool but I think maybe an image on the landing page might
help

~~~
jedimastert
The entire page is editable and a live demo. It could probably be higher up,
but it is mentioned on the page.

~~~
andai
> 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.

------
spurgu
Criticism: Cmd+left/right/up/down doesn't work - instant dealbreaker.

~~~
inyono
What you’d prefer they do? Moving rows around?

~~~
hk__2
Probably nothing: they already exist in Chrome as, respectively, next/previous
/ top/bottom of the page. Edtr.io appears to hijack them for no reason.

~~~
inyono
I see, thanks for the feedback. Going to check that out.

------
jsf01
So this is built on Slate—what does it bring to the table that you can’t do
with Slate out of the box?

~~~
inyono
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.

~~~
fourstar
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.

~~~
inyono
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.

~~~
fourstar
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/...](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/using-
react-in-a-widget.html#demo)) -- 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.

~~~
bhl
Try ProseMirror. There’s a high learning curve at the beginning, but it’s
pretty simple to make custom nodes and plugins once you understand the
framework and APIs.

------
nmstoker
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.

------
madmaniak
[https://vimeo.com/121721311](https://vimeo.com/121721311)

------
indigodaddy
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?

~~~
inyono
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)

------
tobr
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.

~~~
inyono
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.

------
iforgotmypass
I was thinking of building something similar. Any other alternatives to
similar solutions?

~~~
dharma1
more of a complete CMS but has wysiwyg editing and UI blocks -
[https://webiny.com](https://webiny.com)

~~~
SvenAl
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.

------
andybak
Layouts seem broken. Dialogs that are mostly empty space and icons that
overlap borders.

~~~
elliotec
This was all I noticed... not a great look. Hope they fix it because it could
be cool.

------
monikgandhi
Is it possible to embed the editor on a web page?

~~~
ergo14
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).

~~~
inyono
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.

~~~
ergo14
That is an excellent idea!

