시작하기

패키지를 설치하고, id로 임의의 컨테이너 요소에 마운트한 다음, 필요할 때마다 깔끔한 JSON을 추출하세요. Clepit은 프레임워크 의존성이 없으므로 래퍼 없이 React, Vue, Svelte 또는 바닐라 JavaScript에 바로 적용됩니다.

설치

프로젝트에 @clepit/core를 추가하세요. 에디터는 단일 ESM 번들과 TypeScript 정의로 제공됩니다.

bun add @clepit/core

에디터 만들기

div를 추가하고 필요한 EditorConfig 옵션과 함께 Editor.create를 호출하세요. containerId만 필수이고 나머지는 모두 선택 사항입니다.

import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  onChange: data => console.log(data),
  placeholder: 'Start writing…',
  theme: 'auto',
});

편집 및 저장

사용자가 작성한 후 editor.data.extract()를 호출하여 EditorData JSON 형태로 직렬화하세요. 페이로드에는 모든 블록이 담긴 { blocks } 배열이 있습니다.

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [
//     { id: 'abc123', type: 'paragraph', data: { html: 'Hello world' } },
//     ...
//   ]
// }

읽기 전용으로 렌더링

어디에나 저장된 EditorData로부터 HTML을 출력하려면 Renderer.render를 사용하세요. Renderer는 상태를 보유하지 않습니다. containerId가 있는 div만 필요합니다.

import { Renderer } from '@clepit/core';

Renderer.render({
  containerId: 'output',
  data: savedEditorData,
  margins: { bottom: 0, top: 0 },
});

프레임워크 무관

@clepit/core는 피어 프레임워크 의존성이 없습니다. Editor.create와 Renderer.render 모두 전체 DOM API만 필요합니다: React, Vue, Svelte 또는 바닐라 스크립트 모두 직접 동작합니다.