---
EditorJS 관련
말씀하신 EditorJS(https://editorjs.io/) 블록
기반 에디터는 좋은 방향입니다. 현재 JSON 구조가
이미 블록 단위(description, pricing, pros,
cons 등)로 되어 있어서, 향후 EditorJS 스타일로
확장하기 좋은 기반이 있습니다.
EditorJS 도입 시 장점:
- 일관된 디자인: 사용자가 스타일링 선택 불가,
항상 깔끔한 레이아웃
- 블록 단위 편집: 텍스트, 이미지, 리스트 등을
개별 블록으로 관리
- JSON 저장: 현재 방식과 호환 가능
- XSS 방지: HTML 직접 저장 X
추후 EditorJS 통합이 필요하시면 말씀해주세요!
> editorjs가 노션에서 사용하는 에디터인가
⎿ Found 47 new diagnostic issues in 1 file (ctrl+o
to expand)
⏺ EditorJS는 노션 에디터와는 다릅니다. 둘 다
"블록 기반" 개념을 사용하지만 별개의
프로젝트입니다.
블록 기반 에디터 비교
| 에디터 | 개발사 | 특징
|
|---------------|-------------|----------------
--------------|
| Notion Editor | Notion Labs | 비공개/자체
개발, ProseMirror 영향 |
| EditorJS | CodeX | 오픈소스, 경량,
JSON 저장 |
| TipTap | - | ProseMirror
기반, Vue/React 지원 |
| BlockNote | - | 노션 스타일
오픈소스 클론 |
| Slate | - | React 기반
|
노션 스타일 오픈소스 대안
노션과 비슷한 UX를 원하면:
1. BlockNote (https://www.blocknotejs.org/) -
노션 스타일에 가장 가까움
2. TipTap (https://tiptap.dev/) - 확장성 좋음
3. EditorJS - 가볍고 심플함
---
IDE 경고(x-data, x-model 등)는 무시해도 됩니다.
PhpStorm이 Alpine.js 문법을 인식하지 못해서
나오는 경고일 뿐, 실제 오류는 아닙니다.
Alpine.js 플러그인을 설치하거나, Settings →
Inspections → HTML에서 "Unknown attribute"
경고를 끄면 됩니다.
> 다 무료인건가
⏺ 네, 모두 오픈소스/무료입니다.
| 에디터 | 라이선스 | 비용
|
|-------------|------------|-------------------
|
| EditorJS | Apache 2.0 | 완전 무료
|
| BlockNote | MPL 2.0 | 완전 무료
|
| TipTap | MIT | 코어 무료 (Pro
기능 유료) |
| Slate | MIT | 완전 무료
|
| ProseMirror | MIT | 완전 무료
|
추천
| 상황 | 추천 |
|---------|-----------|
| 가볍고 빠르게 | EditorJS |
| 노션 느낌 | BlockNote |
| 커스텀 많이 | TipTap |
현재 JSON 구조 방식이랑 가장 잘 맞는 건
EditorJS입니다. 플러그인도 많고 용량도 작아요.
> 노션 스타일 빠른 글쓰기는 블락노트인건가요
⏺ 네, 노션 스타일 빠른 글쓰기는 BlockNote가 가장
비슷합니다.
BlockNote 특징
- / 입력하면 블록 메뉴 (노션과 동일)
- 드래그로 블록 순서 변경
- 텍스트 선택 시 포맷팅 툴바
- React 기반 (Next.js, Vite 등)
/ ← 슬래시 명령어
📝 텍스트
📋 리스트
🖼️ 이미지
📊 테이블
단점
- React 필수 - 현재 el_d1는 Alpine.js 기반이라
추가 작업 필요
- 용량이 EditorJS보다 큼
현재 프로젝트 기준 추천
| 선택지 | 장점 | 단점
|
|-----------|--------------------|-------------
--|
| EditorJS | Alpine.js와 호환, 가벼움 |
노션보다 단순함 |
| BlockNote | 노션 UX 동일 | React
필요, 무거움 |
현실적으로는 EditorJS가 현재 구조(Alpine.js +
Blade)에 바로 붙이기 쉽습니다. BlockNote는
React 컴포넌트로 별도 빌드해야 해요.
> md 마크다운도 지원하는게 있나.
⏺ 네, 대부분 마크다운 지원합니다.
마크다운 지원 비교
| 에디터 | 마크다운 입력 | 마크다운
출력 | 단축키 |
|-----------|------------|---------|-----------
---|
| EditorJS | ⚠️ 플러그인 필요 | ⚠️ 플러그인 |
#, * 등 부분 지원 |
| BlockNote | ✅ 기본 지원 | ✅ 지원 |
노션처럼 자동 변환 |
| TipTap | ✅ 기본 지원 | ✅ 지원 |
완벽 지원 |
| Milkdown | ✅ 마크다운 전문 | ✅ 완벽 |
WYSIWYG + MD |
마크다운 특화 에디터
Milkdown (https://milkdown.dev/)
- 마크다운 + 블록 에디터 결합
- 플러그인 시스템
- MIT 라이선스 (무료)
- 노션 스타일 / 명령어 지원
제목 입력하면 → H1으로 자동 변환
굵게 → 굵게
- 리스트 → 불릿 리스트
추천 정리
| 원하는 것 | 추천 |
|-------------|--------------------|
| 마크다운 중심 | Milkdown |
| 노션 스타일 + MD | BlockNote, TipTap |
| 가볍게 | EditorJS + MD 플러그인 |
Milkdown이 마크다운 + 블록 에디터 조합으로는
가장 잘 만들어져 있어요. 프레임워크 무관하게
사용 가능(Vanilla JS, React, Vue 모두 지원).