ወደ ዋናው ይዘት ዝለል

የብሎክ ማጣቀሻ

Clepit 12 አብሮ-የተሰሩ የብሎክ አይነቶችን ይዟል። እያንዳንዱ ብሎክ የJSON ቅርጽ፣ renderer እና በeditor.blocks.insert በኩል የፕሮግራም ማስገቢያ መንገድ አለው።

ሁሉም ብሎኮች ሲ-ተከታታይ ሲደረጉ ተመሳሳይ ኤንቨሎፕ ይጋራሉ፦ id፣ type፣ data እና አማራጭ የtunes መዝገብ።

የብሎክ ቅርጽ

እያንዳንዱ ብሎክ ወደ ተመሳሳይ JSON ኤንቨሎፕ ይሰሪያዛል። id በeditor ይሰጣል እና ዳታን ፕሮግራሚቲካሊ ሲያዘጋጁ ሊቀር ይችላል።

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

alert

4 ቅርጾች ያሉት የተደመቀ የማስታወቂያ ሳጥን።

መስክአይነትአስፈላጊመግለጫ
htmlstringአዎየማስጠንቀቂያ መልዕክቱ HTML ይዘት። የውስጠ-መስመር መሳሪያ markup ይደገፋል።
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 callback በኩል ይበላል።

መስክአይነትአስፈላጊመግለጫ
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[]አዎየቼክ ሊስት ንጥሎች ድርድር፣ እያንዳንዱ ጽሑፍ እና የምልክት ሁኔታ አለው።
items[].textstringአዎየንጥሉ መለያ HTML ይዘት።
items[].checkedbooleanአዎየቼክ ሳጥኑ ምልክት ተደርጎበት አለ ወይ።
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

የአገባብ ማድመቅ ያለው የኮድ ብሎክ። 50 ቋንቋዎች ይደገፋሉ፣ typescript፣ python፣ rust፣ go፣ ruby፣ swift እና kotlin ጨምሮ።

መስክአይነትአስፈላጊመግለጫ
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 ይዘት። የውስጠ-መስመር መሳሪያ markup ይደገፋል።
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 callback በኩል ይበላል።

መስክአይነትአስፈላጊመግለጫ
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 ያሉ የውስጠ-መስመር መሳሪያ markup ይቀበላል።

መስክአይነትአስፈላጊመግለጫ
htmlstringአዎየአንቀጹ HTML ይዘት። የውስጠ-መስመር መሳሪያ markup ይደገፋል።
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

አማራጭ የደራሲ መግለጫ ያለው ጥቅስ።

መስክአይነትአስፈላጊመግለጫ
htmlstringአዎየጥቅሱ አካል HTML ይዘት። የውስጠ-መስመር መሳሪያ markup ይደገፋል።
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 ሕዋስ ሕብረቁምፊዎች ድርድር። የመጀመሪያው ረድፍ ርዕስ ረድፍ ነው።
captionstringአይከጠረጴዛ ስር ይታይ የሚልለው ቀጥተኛ-ጽሑፍ ወይም HTML ርዕስ።
showDownloadbooleanአይበተሰጠው ውፅዓት ውስጥ የወርድ አዝራር አሳይ።
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

የቪዲዮ ብሎክ። በEditor.create ላይ ባለው videoUploader callback በኩል ይበላል።

መስክአይነትአስፈላጊመግለጫ
urlstringአዎየቪዲዮ ፋይሉ ወይም YouTube/Vimeo embed link URL።
captionstringአይከማጫወቻው በታች የሚታይ ቀጥተኛ-ጽሑፍ መግለጫ።
altstringአይለቪዲዮ ኤለመንቱ ተደራሽ መለያ።
alignment'center' | 'left' | 'right'አይየዝናቡ አግዳሚ አሰላለፍ። ከነዚህ አንዱ: center, left, right።
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}