मुख्य अवधारणाएँ

ब्लॉक मॉडल

EditorData का केंद्र blocks एरे है: Block ऑब्जेक्ट जो क्रम को बनाए रखते हैं। प्रत्येक Block अपना type, type-specific data, और वैकल्पिक tunes मेटाडेटा रखता है।

फ़ील्ड	प्रकार	विवरण
id	string \| undefined	वैकल्पिक अद्वितीय पहचानकर्ता, बनाते समय editor द्वारा निर्दिष्ट।
type	BlockToolType	लिटरल की जो ब्लॉक को उसके स्कीमा, इनपुट कम्पोनेंट और रेंडरर से जोड़ती है।
data	object	Type-specific डेटा ऑब्जेक्ट: प्रत्येक block type के लिए आकार अलग होता है।
tunes	BlockTunes \| undefined	वैकल्पिक क्रॉस-टाइप tune मेटाडेटा डिक्शनरी। कुंजी 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." }
    }
  ]
}

ब्लॉक टूल बनाम इनलाइन टूल

ब्लॉक टूल EditorData के अंदर सीधे टॉप-लेवल स्लॉट बनाते हैं। इनलाइन टूल ब्लॉक के html पेलोड के अंदर टेक्स्ट को सजाते हैं। दोनों परतें पूरी तरह अलग हैं। इन्हें एक-दूसरे के लिए प्रतिस्थापित नहीं किया जा सकता।

JSON-फ़र्स्ट आउटपुट

एडिटर कभी भी HTML को बनाए नहीं रखता। जब आप editor.data.extract() कॉल करते हैं, तो आपको शुद्ध EditorData JSON मिलता है: मीडिया URL सहित सभी कुछ। इस 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 बनाम Renderer

Editor उपयोगकर्ता को सामग्री संपादित करने देने के लिए ब्राउज़र DOM का उपयोग करता है (केवल ब्राउज़र)। Renderer पहले से सहेजे गए EditorData को लेकर HTML के रूप में रेंडर करता है (ब्राउज़र या SSR के माध्यम से चल सकता है)।

ब्लॉक tunes

Tunes किसी भी block type के लिए type-agnostic मेटाडेटा स्लॉट हैं। कुंजी वह tune नाम है जिसे सिस्टम या प्लगइन सेट करता है, और मान BlockTuneData में टाइप किया जाता है: string, number, boolean या null का कोई भी संयोजन। Tunes मुख्य डेटा संरचना को तोड़े बिना अर्थ जोड़ सकते हैं।

JSON

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

शुरुआत करना

संदर्भ

सर्वर API

गाइड