ወደ ዋናው ይዘት ዝለል

የአገልጋይ ኤፒአይ

RESTGraphQLበቅጽበትMCP

መመሪያዎች

ማካተት

መሠረታዊ ጽንሰ-ሀሳቦች

የብሎክ ሞዴሉ

የEditorData ዋና ትኩረት ነጥብ blocks ድርድር ነው፦ ቅደም ተከተሉን የሚያስቀምጡ Block ኦብጀክቶች። እያንዳንዱ Block ዓይነቱን (type)፣ ዓይነቱ-ስፔሲፊክ ዳታ (data)፣ እና አማራጭ tunes ሜታዳታ ያካትታል።

መስክዓይነትመግለጫ
idstring | undefinedአማራጭ ያልተደጋጋፈ መለያ፣ በeditor ሲፈጠር ተሰጥቷል።
typeBlockToolTypeቁልፍ ቃሉ ብሎኩን ወደ ሞዴሉ፣ ኢን-ፑት ኮምፖነንቱ እና ሪንደረሩ ያያይዛል።
dataobjectዓይነቱ-ስፔሲፊክ ዳታ ኦብጀክት፦ ቅርጹ ለእያንዳንዱ block type ዓይነት ይለያያል።
tunesBlockTunes | undefinedሁሉን-ዓይነቶች የሚደግፍ ሜታዳታ ዕጅግ። ቁልፉ የtune ስም ሲሆን ዋጋው ፍሪ-ፎርም ዳታ ነው።
JSON
{
  "time": 1745000000000,
  "version": "1.0.0",
  "blocks": [
    {
      "id": "abc123",
      "type": "header",
      "data": { "html": "Hello world", "level": "h1" }
    },
    {
      "id": "def456",
      "type": "paragraph",
      "data": { "html": "This is a <b>rich</b> paragraph." }
    }
  ]
}

የብሎክ መሳሪያዎች vs የውስጠ-መስመር መሳሪያዎች

ብሎክ መሳሪያዎች የEditorData ውስጥ ቀጥ ያሉ ቦቶችን ይፈጥራሉ። የውስጠ-መስመር መሳሪያዎች ግን ብሎኩ ይዞ ባለው html ፒሎዱ ውስጥ ጽሑፍ ያጌጡ። ሁለቱ ተዋረዶች ፍጹም ተለያዩ። አቅጣጫ-መስጠት ሊቀያየሩ አይችሉም።

JSON-አቀናባሪ ውጤት

አርታኢው ፈጽሞ HTML አያቆይም። editor.data.extract() ሲጠሩ ብቻ የEditorData JSON ያገኛሉ፦ ሜዲያ ዩአርኤሎቹ ጨምሮ ሁሉንም የሚያሟሉ ዳታ። ይህ JSON ወደ ዳታቤዝ ሊቀመጥ፣ ፔርሶናላይዝ ሊደረግ ወይም ወደ ሌሎች ቅርጾች ሊቀየር ይቻላል።

TypeScript
import { Editor } from '@clepit/core';

const editor = Editor.create({ containerId: 'editor' });

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [ ... ]
// }

Editor vs Renderer

Editor ተጠቃሚው ይዘት እንዲያርትዕ አሳሽ DOM-ን ይጠቀማል (አሳሽ ብቻ ነው)። Renderer ቀደም ሲል የተቀመጠ EditorData ወስዶ HTML ለማቅረብ ሞቲቶ (አሳሽም SSR-ም ሊሰራ ይችላል)።

ብሎክ tunes

Tunes የማንኛውም ብሎክ ዓይነት ፊርማ የሌለው ሜታዳታ ሰሌዳ ናቸው። ቁልፉ ስርዓቱ ወይም ቅጥያው ያስቀመጠው tune ስም ሲሆን፣ ዋጋው ወደ BlockTuneData ነው፦ ሁሉንም string፣ number፣ boolean ወይም null ጥምሮቻቸው። Tunes ዋናውን ዳታ ሳይፈርሱ ትርጉም ሊጨምሩ ይችላሉ።

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Some text." },
  "tunes": {
    "textAlign": { "alignment": "center" },
    "visibility": { "hidden": false }
  }
}