Lumaktaw sa pangunahing nilalaman

Mga gabay

Pag-embed

Block Reference

Naghahatid ang Clepit ng 12 built-in na uri ng block. May JSON shape, renderer, at programmatic na insert path ang bawat block sa pamamagitan ng editor.blocks.insert.

Pinagsasaluhan ng lahat ng block ang parehong envelope kapag na-serialise: id, type, data, at isang opsyonal na tunes record.

Hugis ng block

Ang bawat block ay nase-serialize sa parehong JSON envelope. Ang id ay itinalaga ng editor at maaaring alugin kapag nagtatayo ng data nang programmatic.

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

alert

Naka-highlight na call-out box na may 4 na variant.

FieldUriKinakailanganPaglalarawan
htmlstringOoHTML na nilalaman ng alert na mensahe. Sinusuportahan ang inline tool markup.
variant'error' | 'info' | 'success' | 'warning'OoVisual na estilo ng alert. Isa sa: error, info, success, warning.
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

Audio block. Kino-consume sa pamamagitan ng audioUploader callback sa Editor.create.

FieldUriKinakailanganPaglalarawan
urlstringOoURL ng audio file na ie-embed.
captionstringHindiPlain-text na caption na ipinapakita sa ibaba ng player.
altstringHindiAccessible na label para sa audio element.
alignment'center' | 'left' | 'right'HindiHorizontal na pagkakahanay ng player. Isa sa: center, left, right.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Interactive na checkbox list na may per-item na checked state.

FieldUriKinakailanganPaglalarawan
itemsChecklistItem[]OoArray ng mga checklist item, bawat isa ay may text at checked na estado.
items[].textstringOoHTML na nilalaman ng label ng item.
items[].checkedbooleanOoKung naka-check ang checkbox.
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Code block na may syntax highlighting. Suportado ang 50 wika, kabilang ang typescript, python, rust, go, ruby, swift at kotlin.

FieldUriKinakailanganPaglalarawan
codestringOoAng raw na code string na ipapakita.
languageCodeLanguageHindiWika ng syntax highlighting. Default ay typescript.
themeCodeThemeHindiColour theme ng editor. Default ay github-dark.
showCopybooleanHindiMagpakita ng copy button sa na-render na output.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Visual separator sa pagitan ng mga section.

FieldUriKinakailanganPaglalarawan
variant'line' | 'stars'OoVisual na estilo ng divider. Isa sa: line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

Mga pang-itaas na antas at section heading (h1 hanggang h6). Gumagana ang inline tools sa loob ng html payload.

FieldUriKinakailanganPaglalarawan
htmlstringOoHTML na nilalaman ng heading. Sinusuportahan ang inline tool markup.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'HindiAntas ng heading. Isa sa: h1, h2, h3, h4, h5, h6. Default ay h1.
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

Image block na may caption at alt text. Kino-consume sa pamamagitan ng imageUploader callback sa Editor.create.

FieldUriKinakailanganPaglalarawan
urlstringOoURL ng image na ie-embed.
captionstringHindiPlain-text na caption na ipinapakita sa ibaba ng image.
altstringHindiAlt text para sa image element.
alignment'center' | 'left' | 'right'HindiHorizontal na pagkakahanay ng image. Isa sa: center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Ordered o unordered na listahan. Ang bawat item ay html.

FieldUriKinakailanganPaglalarawan
type'ordered' | 'unordered'OoUri ng list. Isa sa: ordered, unordered.
itemsstring[]OoArray ng mga HTML string, isa para sa bawat list item.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

Rich-text na talata. Tumatanggap ng inline tool markup gaya ng bold, italic, code, link, marker, at tooltip.

FieldUriKinakailanganPaglalarawan
htmlstringOoHTML na nilalaman ng talata. Sinusuportahan ang inline tool markup.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Blockquote na may opsyonal na author attribution.

FieldUriKinakailanganPaglalarawan
htmlstringOoHTML na nilalaman ng katawan ng quote. Sinusuportahan ang inline tool markup.
authorstringHindiPlain-text o HTML na attribution na ipinapakita sa ilalim ng quote.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

Data grid. Maaaring gamitin ang unang row bilang header; ang bawat cell ay html.

FieldUriKinakailanganPaglalarawan
datastring[][]OoDalawang-dimensyonal na array ng mga HTML cell string. Ang unang row ay ang header row.
captionstringHindiPlain-text o HTML na caption na ipinapakita sa ibaba ng table.
showDownloadbooleanHindiMagpakita ng download button sa na-render na output.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

Video block. Kino-consume sa pamamagitan ng videoUploader callback sa Editor.create.

FieldUriKinakailanganPaglalarawan
urlstringOoURL ng video file o YouTube/Vimeo embed link.
captionstringHindiPlain-text na caption na ipinapakita sa ibaba ng player.
altstringHindiAccessible na label para sa video element.
alignment'center' | 'left' | 'right'HindiHorizontal na pagkakahanay ng player. Isa sa: center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}