logo
Steps
1
Introduction to editorjs
2
Scaffolding Basic Application
3
Embedding editorjs in React page
4
Show Editor In our App
5
Conclusion

Introduction to editorjs

If you have ever done front end development, you would know how difficult building and customizing text editor to your needs can be. Text Editors are not a new thing. But as applications are getting more integrated and rich with content, editors are evolving too.
While searching for a editor for my own project, I ran into Editor.js. It is an open source project and is quite popular on Github (>10K stars). This editor is quite different compared to your most modern editors. Here are some of the highlights of editor.js.
  1. Block style editor - every piece of content in the editor is a block. A block can be anything - a paragraph, header, image or literally anything. Popularity of such editors is rising quickly. Popular startups like notion.so are using similar editors at the core.
  2. Clean JSON Output - The final generated data is in JSON format. This is a very big advantage. A lot of editors out there store data in markup html or in markdown. But having JSON makes is very easy to expand the functionality.
  3. Supports Plugins - You can build your own plugin that can extend the functionality of the editor. You can do anything in plugins e.g. calling APIs, transforming data, enriching UI experiences etc. The plugin ecosystem allows your build more richer and interactive content that your usual editors.
  4. Active Project - It is in active development and is stable and mature for production use. 
  5. Documentation - It has very good documentation and awesome-editorjs has a good compilation of plugins and things built on top of the editor.js. 
So I wanted to give it a try. In this tutorial, I plan to use EditorJS in a react application.

ReactJS

ReactJS needs not introduction. It is one of the most widely used front-end development framework. React community has developed thousands of open source projects around react. But integrating EditorJS into React app is not straight forward as editorjs is not a react component. Also, if you are using Server Side Rendering or static generation, you may run into issues. This tutorial will help you do this setup correctly.
So let's get started. 

What you will learn?

  • How to embed editor.js into a sample react application page?
  • Introduction to editor.js plugin APIs 

What you will need?

  • NodeJS environment setup on your machine. 
  • React requires Node >= 8.10 & npm >= 5.6

Source Code

Walkthroughs/editorjs-with-react

This is a codelab that introduces editorjs and shows how to integrated into a react application. - Walkthroughs/editorjs-with-react

github.com

Final Output

The final output page will look like this - 
.
Next
Discussion
You
0