Subscribe
Sign in
Editor.js — A block-styled editor with clean JSON output
Three years under development, 24 repos, 500 merged PRs. Editor.js is here.
A block-styled editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. Designed to be API extendable and pluggable.
Free and open-source 🤩
57
Replies
Would be interesting to see the comparison to other products like ProseMirror.
Pros:Looks great! I've been interested in structured editing for a long time. Good to see great products are hitting the market!
Cons:Didn't try it yet so don't know!
Hi guys - do you have any plans / intentions to come up with another license other than Apache? There has been several similar efforts and for some reasons or another, they have commercialized and changed their license method. If that is anything in your mind, just let everyone know beforehand :-)
@gorkemcetin We does not have such plans. We rely on the power of open source community.
This seems great! When testing on mobile though, I get a bug where the editor occasionally falls underneath the keyboard and I can't access the editor until I close the keyboard and open it again. I waa using Gboard on an iPhone with the chrome mobile browser for context.
Looks really awesome @peter_savchenko. Is it possible to leverage this in a React based app?
@arpit sure, you can even write a plugins on React. We just made some on Vue.
Thank you so much, you have no idea how long have I been searching for a proper editor!
Everybody should donate at least 10$ for the effort you've put into it 💪
#muchlove <3
A bunch of amazing guys showing off their amazing work. Thanks for sharing.
Pros:Easy to use, straightforward!
Cons:None for now
Hi there. We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make it's core more stable. At the same time we significantly improved the API.
So there are few key features:
- Block-styled
- Clean data output
- API pluggable
- Open source
What does it mean «block-styled»
In other editors the workspace is provided by single contenteditable element in where you can create different HTML markup. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.
At the same time, most useful features as arrow-navigation, copy & paste, cross block selection and others works almost as in the familiar editors.
About clean data
As you can see on the last screen, there are clean JSON output: list of structural Blocks with their content description.
You can use this data to easy render in Web, native mobile/desktop applications, pass to Audio Readers, create templates for Facebook Instant Articles, AMP, RSS, create chat-bots and many other.
Also, clean data can be useful for backend processing: sanitizing, validation, injecting an advertising or other stuff, extracting Headings, make covers for social networks from Image Blocks and other.
About API
A key value of the Editor is the API. All main functional units of the Editor.js — Blocks, Inline Formatting Tools, Block Tunes — are provided by external plugins that uses simple and powerful Editor's API.
🤓
Editor.js is more than just an editor. It is a new born open-source community of developers and contributors. Anyone can create new cool API features and plugins.
Thanks for your interest. Hope you enjoy Editor.js.
Peter Savchenko,
CodeX
Looks really good. Would be nice to have online demos for all the official plugins, either separately or one uberexample with all the plugins. Also would be interesting to know what were the benefits of implementing a new tool rather than using and possibly extending one of the existing similar tools (Draft/Prosemirror/Quill/Slate...).
@gabiaxel thank you for the reply. You can download a repo and jump into example.html with all main tools connected. It's a good idea to create web demos for the plugins. There are just samples we created to demonstrate abilities of the Editor API. We hope we can create more complex and useful tools with the community together.
Good projects you mention are not a block-styled editors, so here are typical problems (and benefits too) as inherent with familiar editors: elements jumping or twitching, problems with inline formatting and other. Try to open Quil, make the last word in the line bold and press Enter — new paragraph will be bold too. It's because of single contenteditable wrapper.
We have decide to go own way with independent contenteditable blocks.
Awesome stuff @peter_savchenko ! Has anyone built an Angular or React wrapper for this?
Hi @nasiscoe !
There are third party React and Vue wrappers
https://github.com/stfy/react-ed...
https://www.npmjs.com/package/vu...
Unfortunately no wrapper for Angular yet but we will make our own soon
Need some real examples of usage.
Pros:Amazing...
Cons:I really don't know where to start using...
Thank you.
Check out our Getting Started guide:
https://editorjs.io/getting-started
Also you can clone repo and take a look at the example.html:
https://github.com/codex-team/ed...
People think editors are so easy, its very hard to find something that just works. I have even left projects cos of editors. Thanks for making this
@gauthamzzz Thanks! We appreciate this significant gesture and concern. Feel free to report bugs
It’s my new favorite editor from now on
Pros:Just take my money 💴 .... oh wait it’s free....Hehe Really easy to use. You guys have done an amazing job 😉
Cons:None
Tab Text