የብሎክ ማጣቀሻ
Clepit 12 አብሮ-የተሰሩ የብሎክ አይነቶችን ይዟል። እያንዳንዱ ብሎክ የJSON ቅርጽ፣ renderer እና በeditor.blocks.insert በኩል የፕሮግራም ማስገቢያ መንገድ አለው።
ሁሉም ብሎኮች ሲ-ተከታታይ ሲደረጉ ተመሳሳይ ኤንቨሎፕ ይጋራሉ፦ id፣ type፣ data እና አማራጭ የtunes መዝገብ።
የብሎክ ቅርጽ
እያንዳንዱ ብሎክ ወደ ተመሳሳይ JSON ኤንቨሎፕ ይሰሪያዛል። id በeditor ይሰጣል እና ዳታን ፕሮግራሚቲካሊ ሲያዘጋጁ ሊቀር ይችላል።
{
"id": "abc123",
"type": "paragraph",
"data": { "html": "Hello <b>world</b>" },
"tunes": {}
}alert
4 ቅርጾች ያሉት የተደመቀ የማስታወቂያ ሳጥን።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| html | string | አዎ | የማስጠንቀቂያ መልዕክቱ HTML ይዘት። የውስጠ-መስመር መሳሪያ markup ይደገፋል። |
| variant | 'error' | 'info' | 'success' | 'warning' | አዎ | የማስጠንቀቂያው ምስላዊ ቅጥ። ከነዚህ አንዱ: error, info, success, warning። |
{
"type": "alert",
"data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}audio
የድምፅ ብሎክ። በEditor.create ላይ ባለው audioUploader callback በኩል ይበላል።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| url | string | አዎ | ለማስገባት የኦዲዮ ፋይሉ URL። |
| caption | string | አይ | ከማጫወቻው በታች የሚታይ ቀጥተኛ-ጽሑፍ መግለጫ። |
| alt | string | አይ | ለኦዲዮ ኤለመንቱ ተደራሽ መለያ። |
| alignment | 'center' | 'left' | 'right' | አይ | የዝናቡ አግዳሚ አሰላለፍ። ከነዚህ አንዱ: center, left, right። |
{
"type": "audio",
"data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}checklist
በተናጠል ምልክት የተደረገበት ሁኔታ ያለው መስተጋብራዊ የቼክ ሳጥን ዝርዝር።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| items | ChecklistItem[] | አዎ | የቼክ ሊስት ንጥሎች ድርድር፣ እያንዳንዱ ጽሑፍ እና የምልክት ሁኔታ አለው። |
| items[].text | string | አዎ | የንጥሉ መለያ HTML ይዘት። |
| items[].checked | boolean | አዎ | የቼክ ሳጥኑ ምልክት ተደርጎበት አለ ወይ። |
{
"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 ጨምሮ።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| code | string | አዎ | ለማሳየት ያለው ቀጥተኛ ኮድ ሕብረቁምፊ። |
| language | CodeLanguage | አይ | የሲንታክስ ማድመቂያ ቋንቋ። ነባሪ typescript ነው። |
| theme | CodeTheme | አይ | የአርታኢ ቀለም ጭብጥ። ነባሪ github-dark ነው። |
| showCopy | boolean | አይ | በተሰጠው ውፅዓት ውስጥ የቅዳ አዝራር አሳይ። |
{
"type": "code",
"data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}delimiter
በክፍሎች መካከል ያለ የእይታ መለያያ።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| variant | 'line' | 'stars' | አዎ | የምክፋዩ ምስላዊ ቅጥ። ከነዚህ አንዱ: line, stars። |
{
"type": "delimiter",
"data": { "variant": "line" }
}header
ከፍተኛ-ደረጃ እና የክፍል ርዕሶች (h1 እስከ h6)። የውስጠ-መስመር መሳሪያዎች በhtml ጭነት ውስጥ ይሰራሉ።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| html | string | አዎ | የርዕሱ HTML ይዘት። የውስጠ-መስመር መሳሪያ markup ይደገፋል። |
| level | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | አይ | የርዕስ ደረጃ። ከነዚህ አንዱ: h1, h2, h3, h4, h5, h6። ነባሪ h1 ነው። |
{
"type": "header",
"data": { "html": "Getting started", "level": "h2" }
}image
መግለጫ ጽሑፍ እና alt ጽሑፍ ያለው የምስል ብሎክ። በEditor.create ላይ ባለው imageUploader callback በኩል ይበላል።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| url | string | አዎ | ለማስገባት ያለው ምስሉ URL። |
| caption | string | አይ | ከምስሉ በታች ይታይ የሚልለው ቀጥተኛ-ጽሑፍ ርዕስ። |
| alt | string | አይ | ለምስሉ ኤለመንት የalt ጽሑፍ። |
| alignment | 'center' | 'left' | 'right' | አይ | የምስሉ አግዳሚ አሰላለፍ። ከነዚህ አንዱ: center, left, right። |
{
"type": "image",
"data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}list
የተደረደረ ወይም ያልተደረደረ ዝርዝር። እያንዳንዱ ንጥል html ነው።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| type | 'ordered' | 'unordered' | አዎ | የዝርዝር አይነት። ከነዚህ አንዱ: ordered, unordered። |
| items | string[] | አዎ | የHTML ሕብረቁምፊዎች ድርድር፣ በዝርዝር ንጥል አንድ። |
{
"type": "list",
"data": { "type": "unordered", "items": ["First item", "Second item"] }
}paragraph
የበለፀገ-ጽሑፍ አንቀጽ። እንደ bold፣ italic፣ code፣ link፣ marker እና tooltip ያሉ የውስጠ-መስመር መሳሪያ markup ይቀበላል።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| html | string | አዎ | የአንቀጹ HTML ይዘት። የውስጠ-መስመር መሳሪያ markup ይደገፋል። |
{
"type": "paragraph",
"data": { "html": "This is a <b>paragraph</b> with inline markup." }
}quote
አማራጭ የደራሲ መግለጫ ያለው ጥቅስ።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| html | string | አዎ | የጥቅሱ አካል HTML ይዘት። የውስጠ-መስመር መሳሪያ markup ይደገፋል። |
| author | string | አይ | ከጥቅሱ ስር ይታይ የሚልለው ቀጥተኛ-ጽሑፍ ወይም HTML ቅፅ። |
{
"type": "quote",
"data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}table
የውሂብ ፍርግርግ። የመጀመሪያው ረድፍ እንደ ራስጌ ሊውል ይችላል፤ እያንዳንዱ ሕዋስ html ነው።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| data | string[][] | አዎ | ሁለት-አቅጣጫዊ የHTML ሕዋስ ሕብረቁምፊዎች ድርድር። የመጀመሪያው ረድፍ ርዕስ ረድፍ ነው። |
| caption | string | አይ | ከጠረጴዛ ስር ይታይ የሚልለው ቀጥተኛ-ጽሑፍ ወይም HTML ርዕስ። |
| showDownload | boolean | አይ | በተሰጠው ውፅዓት ውስጥ የወርድ አዝራር አሳይ። |
{
"type": "table",
"data": {
"data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
"caption": "AlertData fields",
"showDownload": false
}
}video
የቪዲዮ ብሎክ። በEditor.create ላይ ባለው videoUploader callback በኩል ይበላል።
| መስክ | አይነት | አስፈላጊ | መግለጫ |
|---|---|---|---|
| url | string | አዎ | የቪዲዮ ፋይሉ ወይም YouTube/Vimeo embed link URL። |
| caption | string | አይ | ከማጫወቻው በታች የሚታይ ቀጥተኛ-ጽሑፍ መግለጫ። |
| alt | string | አይ | ለቪዲዮ ኤለመንቱ ተደራሽ መለያ። |
| alignment | 'center' | 'left' | 'right' | አይ | የዝናቡ አግዳሚ አሰላለፍ። ከነዚህ አንዱ: center, left, right። |
{
"type": "video",
"data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}