본문 내용으로 건너뛰기

가이드

임베딩

구성

EditorConfig와 RendererConfig는 모든 커스터마이징의 진입점입니다. 각각 Editor.create() 또는 Renderer.render()에 전달하세요. containerId(및 렌더러의 data)만 필수이며, 나머지 옵션은 모두 안전한 기본값을 가집니다.

EditorConfig

EditorConfig를 Editor.create()의 유일한 인수로 전달하세요. 필수 containerId는 기존 DOM 요소 id와 일치해야 합니다.

옵션타입필수설명
containerIdstring예에디터를 호스팅할 DOM 요소의 ID. Editor.create()가 호출되기 전에 DOM에 존재해야 합니다.
maxHeightnumber아니오픽셀 단위의 에디터 최대 높이. 높이 제한 없음은 0(기본값)으로 설정하세요.
minHeightnumber아니오픽셀 단위의 에디터 최소 높이. 기본값은 300입니다.
onChange(data: EditorData) => void아니오문서가 변경될 때마다 실행되는 콜백. 전체 EditorData 스냅샷을 받습니다.
onReady() => void아니오에디터가 완전히 초기화되어 API 호출을 받을 준비가 되면 실행되는 콜백.
placeholderstring아니오에디터가 비어 있을 때 표시되는 플레이스홀더 텍스트. 기본값은 'Start writing...'입니다.
initialDataEditorData아니오에디터가 마운트될 때 로드할 미리 채워진 EditorData.
initialView'edit' | 'preview' | 'json'아니오초기 뷰 모드. 다음 중 하나: edit, preview, json. 기본값은 'edit'입니다.
allowJsonViewEditingboolean아니오true이면 JSON 뷰가 편집 가능해지고 변경 사항이 문서로 다시 전파됩니다. 기본값은 false입니다.
marginsBlockMargins아니오모든 블록에 적용되는 전역 위아래 여백(픽셀). 블록별 구성이 우선합니다.
stylesEditorStyles아니오에디터 크롬(툴바, 다이얼로그, 컨트롤)의 세밀한 CSS 커스터마이징을 위한 EditorStyles 객체.
classNamesEditorClassNames아니오에디터 크롬 요소에 CSS 클래스 이름을 연결하는 EditorClassNames 객체.
imageUploaderUploadFunction아니오이미지 파일을 업로드하고 공개 URL 문자열을 반환하는 비동기 함수.
audioUploaderUploadFunction아니오오디오 파일을 업로드하고 공개 URL 문자열을 반환하는 비동기 함수.
videoUploaderUploadFunction아니오비디오 파일을 업로드하고 공개 URL 문자열을 반환하는 비동기 함수.
theme'auto' | 'light' | 'dark'아니오색상 구성표. 다음 중 하나: auto(시스템 따름), light, dark. 기본값은 auto입니다.
themeOverrides{ light?: ThemeTokens; dark?: ThemeTokens }아니오모드별 토큰 재정의. 전체 테마를 교체하지 않고 색상을 커스터마이징하려면 light 및/또는 dark 토큰 맵을 제공하세요.
TypeScript
import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
  imageUploader: async file => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/api/upload', { body: form, method: 'POST' });
    const { url } = await res.json();
    return url;
  },
});

RendererConfig

RendererConfig를 Renderer.render()의 유일한 인수로 전달하세요. containerId와 data 모두 필수입니다.

옵션타입필수설명
containerIdstring예렌더링된 출력이 주입될 DOM 요소의 ID.
dataEditorData예렌더링할 EditorData 문서. 필수.
marginsBlockMargins아니오모든 렌더링된 블록에 적용되는 전역 위아래 여백(픽셀).
stylesBlockStyles아니오렌더링된 출력의 블록 유형별 CSS 커스터마이징을 위한 BlockStyles 맵.
classNamesBlockClassNames아니오렌더링된 출력의 블록 유형별 CSS 클래스 이름을 위한 BlockClassNames 맵.
editorClassNamesEditorClassNames아니오인터랙티브 컴포넌트를 렌더링하는 블록에 전달되는 EditorClassNames(예: 문단의 tooltip classNames).
configsPartial<BlockTypeOutputConfigs>아니오블록별 OutputConfig 객체의 부분 맵. 각 항목은 블록 수준 여백과 tooltip 클래스 이름을 설정할 수 있습니다.
theme'auto' | 'light' | 'dark'아니오색상 구성표. 다음 중 하나: auto, light, dark.
themeOverrides{ light?: ThemeTokens; dark?: ThemeTokens }아니오렌더링된 출력의 모드별 토큰 재정의.
TypeScript
import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';

const data: EditorData = await fetch('/api/content/123').then(r => r.json());

Renderer.render({
  containerId: 'output',
  data,
  theme: 'auto',
  margins: { bottom: 16, top: 16 },
});

블록 수준 스타일링

EditorConfig와 RendererConfig 모두 블록 유형을 키로 하는 styles, classNames, configs를 허용합니다. 대상이 지정된 재정의에 사용하세요. 전체 토큰 참조는 Themes 페이지를 참조하세요.

TypeScript
import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';

const editorStyles: EditorStyles = {
  blockToolbar: { container: { borderRadius: '8px' } },
};

const blockStyles: BlockStyles = {
  header: { h1: { fontFamily: 'Georgia, serif' } },
  paragraph: { lineHeight: '1.75' },
  table: { cell: { padding: '8px 12px' } },
};

const blockClassNames: BlockClassNames = {
  paragraph: 'prose-paragraph',
  header: { h1: 'prose-h1', h2: 'prose-h2' },
  alert: { info: 'alert-info', error: 'alert-error' },
};

Editor.create({
  containerId: 'editor',
  styles: editorStyles,
});

Renderer.render({
  containerId: 'output',
  data,
  styles: blockStyles,
  classNames: blockClassNames,
});