Rukia hadi maudhui makuu

Mwongozo

Upachikaji

Marejeo ya Vizuizi

Clepit huja na aina 12 za vizuizi zilizojengwa ndani. Kila kizuizi kina umbo la JSON, kionyeshi, na njia ya kuingiza kwa programu kupitia editor.blocks.insert.

Vizuizi vyote hushiriki bahasha ile ile vinaposerialishwa: id, type, data, na rekodi ya hiari ya tunes.

Umbo la kizuizi

Kila kizuizi hiserialishwa kwenye bahasha ile ile ya JSON. id hutolewa na mhariri na inaweza kuachwa wakati wa kujenga data kwa programu.

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

alert

Kisanduku cha tahadhari kilichoangaziwa chenye aina 4.

SehemuAinaInahitajikaMaelezo
htmlstringNdiyoMaudhui ya HTML ya ujumbe wa tahadhari. Markup ya zana za ndani ya mstari inasaidiwa.
variant'error' | 'info' | 'success' | 'warning'NdiyoMtindo wa kuona wa tahadhari. Moja ya: error, info, success, warning.
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

Kizuizi cha sauti. Hutumiwa kupitia callback ya audioUploader kwenye Editor.create.

SehemuAinaInahitajikaMaelezo
urlstringNdiyoURL ya faili ya sauti ya kupachika.
captionstringHapanaMaelezo ya maandishi wazi yanayoonyeshwa chini ya kichezaji.
altstringHapanaLebo inayoweza kufikiwa kwa kipengele cha sauti.
alignment'center' | 'left' | 'right'HapanaUsawazishaji wa mlalo wa kichezaji. Moja ya: center, left, right.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Orodha ya visanduku vya kuteua inayoshirikiana yenye hali ya kuteuliwa kwa kila kipengele.

SehemuAinaInahitajikaMaelezo
itemsChecklistItem[]NdiyoSafu ya vipengele vya orodha ya ukaguzi, kila kimoja kina maandishi na hali ya kuteuliwa.
items[].textstringNdiyoMaudhui ya HTML ya lebo ya kipengele.
items[].checkedbooleanNdiyoIwapo kisanduku cha kuteua kimechaguliwa.
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Kizuizi cha msimbo chenye uangaziaji wa sintaksia. Lugha 50 zinaungwa mkono, zikiwemo typescript, python, rust, go, ruby, swift na kotlin.

SehemuAinaInahitajikaMaelezo
codestringNdiyoMfuatano wa nambari za msimbo unaotaka kuonyeshwa.
languageCodeLanguageHapanaLugha ya kuonyesha sintaksia. Chaguo-msingi ni typescript.
themeCodeThemeHapanaMandhari ya rangi ya mhariri. Chaguo-msingi ni github-dark.
showCopybooleanHapanaOnyesha kitufe cha kunakili katika matokeo yaliyoonyeshwa.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Kitenganishi cha kuona kati ya sehemu.

SehemuAinaInahitajikaMaelezo
variant'line' | 'stars'NdiyoMtindo wa kuona wa kigawanishi. Moja ya: line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

Vichwa vya kiwango cha juu na vya sehemu (h1 hadi h6). Zana za ndani ya mstari hufanya kazi ndani ya mzigo wa html.

SehemuAinaInahitajikaMaelezo
htmlstringNdiyoMaudhui ya HTML ya kichwa. Markup ya zana za ndani ya mstari inasaidiwa.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'HapanaKiwango cha kichwa. Moja ya: h1, h2, h3, h4, h5, h6. Chaguo-msingi ni h1.
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

Kizuizi cha picha chenye maelezo na maandishi ya alt. Hutumiwa kupitia callback ya imageUploader kwenye Editor.create.

SehemuAinaInahitajikaMaelezo
urlstringNdiyoURL ya picha ya kupachika.
captionstringHapanaMaelezo ya maandishi wazi yanayoonyeshwa chini ya picha.
altstringHapanaMaandishi ya alt kwa kipengele cha picha.
alignment'center' | 'left' | 'right'HapanaUsawazishaji wa mlalo wa picha. Moja ya: center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Orodha iliyopangwa au isiyopangwa. Kila kipengele ni html.

SehemuAinaInahitajikaMaelezo
type'ordered' | 'unordered'NdiyoAina ya orodha. Moja ya: ordered, unordered.
itemsstring[]NdiyoSafu ya mifuatano ya HTML, moja kwa kila kipengele cha orodha.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

Aya ya maandishi tajiri. Hukubali markup ya zana za ndani ya mstari kama bold, italic, code, link, marker, na tooltip.

SehemuAinaInahitajikaMaelezo
htmlstringNdiyoMaudhui ya HTML ya aya. Markup ya zana za ndani ya mstari inasaidiwa.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Nukuu ya kizuizi yenye sifa ya mwandishi ya hiari.

SehemuAinaInahitajikaMaelezo
htmlstringNdiyoMaudhui ya HTML ya mwili wa nukuu. Markup ya zana za ndani ya mstari inasaidiwa.
authorstringHapanaMaelezo ya maandishi wazi au HTML yanayoonyeshwa chini ya nukuu.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

Gridi ya data. Safu ya kwanza inaweza kutumika kama kichwa; kila seli ni html.

SehemuAinaInahitajikaMaelezo
datastring[][]NdiyoSafu ya pande mbili ya mifuatano ya seli za HTML. Safu ya kwanza ni safu ya kichwa.
captionstringHapanaMaelezo ya maandishi wazi au HTML yanayoonyeshwa chini ya jedwali.
showDownloadbooleanHapanaOnyesha kitufe cha kupakua katika matokeo yaliyoonyeshwa.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

Kizuizi cha video. Hutumiwa kupitia callback ya videoUploader kwenye Editor.create.

SehemuAinaInahitajikaMaelezo
urlstringNdiyoURL ya faili ya video au kiungo cha kuingiza YouTube/Vimeo.
captionstringHapanaMaelezo ya maandishi wazi yanayoonyeshwa chini ya kichezaji.
altstringHapanaLebo inayoweza kufikiwa kwa kipengele cha video.
alignment'center' | 'left' | 'right'HapanaUsawazishaji wa mlalo wa kichezaji. Moja ya: center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}