Editor.js?

Editor.js는 블록 스타일 텍스트 편집기이다. 무거운 HTML 마크업대신 JSON 으로 깔끔하게 데이터를 출력한다. 또한, Editor.js는 API 확장 및 플러그가 가능하도록 설계되어있다는 점이 가장 큰 장점이다.
주요 기능은 다음과 같다.

1. 깔끔한 데이터 출력
2. 즉시 사용 가능한 최신 UI 구현
3. 확장성이 좋고, 잘 설계되어있는 API
4. 오픈 소스

블록스타일은 뭐야?

흔히 우리가 쓰는 Notion에서 자주 사용하는 방식이다.

아래는 Notion 공식 페이지에서 설명하고있는 '블록'에 대한 설명이다.

블록이란 무엇일까?

Notion은 무한한 블록이 들어 있는 상자입니다. 블록을 꺼내서 원하는 것을 마음대로 만들어 보세요! Notion의 모든 페이지는 여러 개의 블록으로 구성됩니다. 레고로 만든 성이 레고 블록으로 지어진 것처럼 말이죠! 🧱

블록으로 구성되는 Notion

Notion 페이지를 만들고 텍스트를 입력해 봤다면 바로 텍스트 '블록'을 추가한거라 볼 수 있다. Notion 페이지에는 텍스트 이외에도 다양한 콘텐츠를 추가할 수 있다.
텍스트, 이미지, 표 등 페이지에 추가하는 콘텐츠는 각각 하나의 블록이다. Notion의 페이지는 사용자가 원하는 대로 쌓아 올린 블록으로 이뤄지는 것이다.
여러 유형을 블록으로 구성된 아래 예시 페이지를 확인해보자!

API 플러그??

Editor.js 에서 핵심적으로 밀고 나가는 부분이 API 라고 한다. 편집기의 모든 주요 기능 단위(블록, 인라인 서식 도구, 블록 조정)와 같은 핵심 부분을 더 추상화 하고 API를 더 강력하게 만들기 위해 이러한 도구들을 별도의 스크립트로 추출했다고 한다. 자체 플러그인과 API를 통해 어렵고 힘든 부분을 쉽게 구현할 수 있다고 한다.

오픈소스, 그래서...?

Editor.js는 단순히 편집기가 아닌 거대한 오픈 소스 커뮤니티라고 한다. 따라서 누구나 개선점이나 버그 수정을 제안할 수 있다. 누구나 새로운 멋진 API기능과 플러그인을 직접 만들 수 있다!
또한 Editor.js 플러그인 개발자들을 지원할 예정이라고 한다!

참고 자료

https://editorjs.io/base-concepts/
https://www.npmjs.com/package/@editorjs/editorjs
https://github.com/editor-js/awesome-editorjs