에디터 비교

--- 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 모두 지원).