본문 내용으로 건너뛰기

가이드

임베딩

블록 참조

Clepit은 12가지 내장 블록 유형을 제공합니다. 모든 블록에는 JSON 형태, 렌더러, 그리고 editor.blocks.insert를 통한 프로그래밍 방식의 삽입 경로가 있습니다.

모든 블록은 직렬화될 때 동일한 엔벨로프를 공유합니다: id, type, data 및 선택적 tunes 레코드.

블록의 형태

모든 블록은 동일한 JSON 엔벨로프로 직렬화됩니다. id는 에디터가 할당하며 데이터를 프로그래밍 방식으로 구성할 때 생략할 수 있습니다.

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Hello <b>world</b>" },
  "tunes": {}
}

alert

4가지 변형이 있는 강조 콜아웃 박스.

필드타입필수설명
htmlstring예알림 메시지의 HTML 콘텐츠. 인라인 도구 마크업이 지원됩니다.
variant'error' | 'info' | 'success' | 'warning'예알림의 시각적 스타일. 다음 중 하나: error, info, success, warning.
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

오디오 블록. Editor.create의 audioUploader 콜백을 통해 처리됩니다.

필드타입필수설명
urlstring예임베드할 오디오 파일의 URL.
captionstring아니요플레이어 아래에 표시되는 일반 텍스트 캡션.
altstring아니요오디오 요소의 접근 가능한 레이블.
alignment'center' | 'left' | 'right'아니요플레이어의 수평 정렬. 다음 중 하나: center, left, right.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

항목별 체크 상태를 가진 대화형 체크박스 목록.

필드타입필수설명
itemsChecklistItem[]예체크리스트 항목의 배열, 각각 text와 checked 상태를 가집니다.
items[].textstring예항목 레이블의 HTML 콘텐츠.
items[].checkedboolean예체크박스가 체크되어 있는지 여부.
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

구문 강조가 적용된 코드 블록. typescript, python, rust, go, ruby, swift, kotlin을 포함해 50개 언어를 지원합니다.

필드타입필수설명
codestring예표시할 원시 코드 문자열.
languageCodeLanguage아니요구문 강조 언어. 기본값은 typescript입니다.
themeCodeTheme아니요에디터 색상 테마. 기본값은 github-dark입니다.
showCopyboolean아니요렌더링된 출력에 복사 버튼을 표시합니다.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

섹션 사이의 시각적 구분선.

필드타입필수설명
variant'line' | 'stars'예구분선의 시각적 스타일. 다음 중 하나: line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

최상위 및 섹션 제목(h1부터 h6까지). 인라인 도구는 html 페이로드 안에서 작동합니다.

필드타입필수설명
htmlstring예제목의 HTML 콘텐츠. 인라인 도구 마크업이 지원됩니다.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'아니요제목 레벨. 다음 중 하나: h1, h2, h3, h4, h5, h6. 기본값은 h1입니다.
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

캡션과 alt 텍스트가 있는 이미지 블록. Editor.create의 imageUploader 콜백을 통해 처리됩니다.

필드타입필수설명
urlstring예임베드할 이미지의 URL.
captionstring아니요이미지 아래에 표시되는 일반 텍스트 캡션.
altstring아니요이미지 요소의 alt 텍스트.
alignment'center' | 'left' | 'right'아니요이미지의 수평 정렬. 다음 중 하나: center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

순서가 있거나 없는 목록. 각 항목은 html입니다.

필드타입필수설명
type'ordered' | 'unordered'예목록 유형. 다음 중 하나: ordered, unordered.
itemsstring[]예HTML 문자열의 배열, 각 목록 항목당 하나.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

서식 있는 텍스트 단락. bold, italic, code, link, marker, tooltip 같은 인라인 도구 마크업을 허용합니다.

필드타입필수설명
htmlstring예단락의 HTML 콘텐츠. 인라인 도구 마크업이 지원됩니다.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

선택적 작성자 표기가 있는 인용 블록.

필드타입필수설명
htmlstring예인용문 본문의 HTML 콘텐츠. 인라인 도구 마크업이 지원됩니다.
authorstring아니요인용문 아래에 표시되는 일반 텍스트 또는 HTML 출처.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

데이터 그리드. 첫 번째 행을 헤더로 사용할 수 있습니다. 각 셀은 html입니다.

필드타입필수설명
datastring[][]예HTML 셀 문자열의 2차원 배열. 첫 번째 행이 헤더 행입니다.
captionstring아니요테이블 아래에 표시되는 일반 텍스트 또는 HTML 캡션.
showDownloadboolean아니요렌더링된 출력에 다운로드 버튼을 표시합니다.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

비디오 블록. Editor.create의 videoUploader 콜백을 통해 처리됩니다.

필드타입필수설명
urlstring예비디오 파일의 URL 또는 YouTube/Vimeo 임베드 링크.
captionstring아니요플레이어 아래에 표시되는 일반 텍스트 캡션.
altstring아니요비디오 요소의 접근 가능한 레이블.
alignment'center' | 'left' | 'right'아니요플레이어의 수평 정렬. 다음 중 하나: center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}