codex-team/editor.js

블록 기반 모던 WYSIWYG 에디터로 JSON 출력 방식의 유연한 콘텐츠 편집 도구

개발 재료맘대로 써도 됨 · Apache-2.0디자인·UI 컴포넌트난이도

31,823+0이번 주2,236603TypeScript

중간맛 분석

TypeScript로 작성된 모던 블록 에디터입니다. 설치는 npm으로 간단하고, Heading, Image, Table, Embed 등 공식 도구 15+ 개를 선택해 조합한 후 초기화하면 바로 사용 가능합니다. editor.save()로 JSON 데이터를 얻을 수 있으며, 웹·모바일·AMP·챗봇 등 다양한 플랫폼에서 통합할 수 있습니다. 공식 문서와 example.html에 상세 예제가 있습니다.

이런 레포예요

이럴 때 쓰면 좋아요

CMS나 블로그 플랫폼에서 사용자가 구조화된 콘텐츠를 작성할 때
모바일 앱이나 AMP 페이지에서 경량 에디터가 필요할 때
AI 챗봇이나 음성 리더 등 여러 플랫폼에서 콘텐츠를 활용해야 할 때

핵심 기능

블록 기반 구조로 독립적인 콘텐츠 관리깔끔한 JSON 출력으로 쉬운 통합15+ 공식 플러그인과 무제한 커스텀 도구 지원

대안 대비 차별점

HTML 마크업 대신 JSON 출력으로 다양한 플랫폼(웹, 모바일, AMP, AI)에서 쉽게 통합 가능하며, 완전한 플러그인 기반 아키텍처로 핵심을 경량으로 유지하면서 무한한 확장성을 제공합니다.

바로 시작하기

Editor.js 라이브러리를 NPM으로 설치합니다

npm i @editorjs/editorjs

필요한 도구 플러그인을 설치합니다 (예: Heading, Image)

npm i @editorjs/header @editorjs/image

HTML에 에디터 컨테이너를 추가합니다

<div id="editorjs"></div>

JavaScript에서 Editor 인스턴스를 초기화합니다

import EditorJS from '@editorjs/editorjs'
import Header from '@editorjs/header'
import Image from '@editorjs/image'

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    header: Header,
    image: Image
  }
})

저장 버튼 클릭 시 데이터를 JSON으로 추출합니다

const data = await editor.save()
console.log(data)

별 추이 · 7일

31,823+0 / 7일

활용성 · 따라 만들기 좋은가

샘플 점수 20/100

관대한 라이선스
테스트 있음
예제 디렉토리
최근 활동
AGENTS.md
llms.txt
템플릿

⚪ 최근 활동 정보 없음 · 2015년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기