Liigu põhisisu juurde

Juhendid

Manustamine

Ploki viide

Clepit sisaldab 12 sisseehitatud plokitüüpi. Igal plokil on JSON-i kuju, renderdaja ja programmaatiline sisestustee editor.blocks.insert kaudu.

Kõik plokid jagavad serialiseerimisel sama ümbrikku: id, type, data ja valikuline tunes-kirje.

Ploki kuju

Iga plokk serialiseeritakse samasse JSON-ümbrikku. id määratakse redaktori poolt ja seda saab andmete programmaatilise koostamise korral välja jätta.

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

alert

Esiletõstetud teatekast 4 variandiga.

VäliTüüpNõutavKirjeldus
htmlstringJahTeavitussõnumi HTML-sisu. Tekstisiseste tööriistade märgistus on toetatud.
variant'error' | 'info' | 'success' | 'warning'JahTeavituse visuaalne stiil. Üks järgmistest: error, info, success, warning.
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

Heliplokk. Kasutatakse Editor.create audioUploader tagasikutse kaudu.

VäliTüüpNõutavKirjeldus
urlstringJahManustatava helifaili URL.
captionstringEiLihtteksti pealkiri, mis kuvatakse mängija all.
altstringEiHelieelemendi juurdepääsetav silt.
alignment'center' | 'left' | 'right'EiMängija horisontaalne joondus. Üks järgmistest: center, left, right.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Interaktiivne märkeruutude loend iga elemendi märgitud olekuga.

VäliTüüpNõutavKirjeldus
itemsChecklistItem[]JahKontrollnimekirja elementide massiiv, igaühel on tekst ja märgitud olek.
items[].textstringJahElemendi sildi HTML-sisu.
items[].checkedbooleanJahKas märkeruut on märgitud.
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Süntaksi esiletõstuga koodiplokk. Toetatud on 50 keelt, sealhulgas typescript, python, rust, go, ruby, swift ja kotlin.

VäliTüüpNõutavKirjeldus
codestringJahKuvatav tooore koodijada.
languageCodeLanguageEiSüntaksi esiletõstmise keel. Vaikimisi typescript.
themeCodeThemeEiRedaktori värviteema. Vaikimisi github-dark.
showCopybooleanEiNäita renderdatud väljundis kopeerimisnuppu.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Visuaalne eraldaja sektsioonide vahel.

VäliTüüpNõutavKirjeldus
variant'line' | 'stars'JahEraldaja visuaalne stiil. Üks järgmistest: line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

Ülataseme ja sektsiooni pealkirjad (h1 kuni h6). Tekstisisesed tööriistad töötavad html-koormuse sees.

VäliTüüpNõutavKirjeldus
htmlstringJahPealkirja HTML-sisu. Tekstisiseste tööriistade märgistus on toetatud.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'EiPealkirja tase. Üks järgmistest: h1, h2, h3, h4, h5, h6. Vaikimisi h1.
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

Pildiplokk pealdise ja alt-tekstiga. Kasutatakse Editor.create imageUploader tagasikutse kaudu.

VäliTüüpNõutavKirjeldus
urlstringJahManustatava pildi URL.
captionstringEiLihtteksti pealkiri, mis kuvatakse pildi all.
altstringEiPildi elemendi alt-tekst.
alignment'center' | 'left' | 'right'EiPildi horisontaalne joondus. Üks järgmistest: center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Järjestatud või järjestamata loend. Iga element on html.

VäliTüüpNõutavKirjeldus
type'ordered' | 'unordered'JahLoendi tüüp. Üks järgmistest: ordered, unordered.
itemsstring[]JahHTML-stringide massiiv, üks loendielemendi kohta.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

Vormindatud tekstilõik. Aktsepteerib tekstisiseste tööriistade märgistust nagu bold, italic, code, link, marker ja tooltip.

VäliTüüpNõutavKirjeldus
htmlstringJahLõigu HTML-sisu. Tekstisiseste tööriistade märgistus on toetatud.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Tsitaat valikulise autori viitega.

VäliTüüpNõutavKirjeldus
htmlstringJahTsitaadi sisu HTML-sisu. Tekstisiseste tööriistade märgistus on toetatud.
authorstringEiLihttekst- või HTML-viide, mis kuvatakse tsitaadi all.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

Andmevõrk. Esimest rida saab kasutada päisena; iga lahter on html.

VäliTüüpNõutavKirjeldus
datastring[][]JahHTML-lahtristringide kahemõõtmeline massiiv. Esimene rida on päiserida.
captionstringEiLihttekst- või HTML-pealkiri, mis kuvatakse tabeli all.
showDownloadbooleanEiNäita renderdatud väljundis allalaadimise nuppu.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

Videoplokk. Kasutatakse Editor.create videoUploader tagasikutse kaudu.

VäliTüüpNõutavKirjeldus
urlstringJahVideofaili URL või YouTube/Vimeo manustamislink.
captionstringEiLihtteksti pealkiri, mis kuvatakse mängija all.
altstringEiVideoelemendi juurdepääsetav silt.
alignment'center' | 'left' | 'right'EiMängija horisontaalne joondus. Üks järgmistest: center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}