शुरुआत करना

पैकेज इंस्टॉल करें, इसे id द्वारा किसी भी कंटेनर एलिमेंट में माउंट करें, और जब भी ज़रूरत हो साफ़ JSON निकालें। Clepit की कोई पीयर फ्रेमवर्क निर्भरता नहीं है, इसलिए यह बिना रैपर के React, Vue, Svelte या वैनिला JavaScript में जुड़ जाता है।

इंस्टॉल

अपने प्रोजेक्ट में @clepit/core जोड़ें। एडिटर एकल ESM बंडल और TypeScript परिभाषाओं के साथ आता है।

bun add @clepit/core

एक एडिटर बनाएं

एक div जोड़ें, फिर आवश्यक EditorConfig विकल्पों के साथ Editor.create कॉल करें। containerId एकमात्र अनिवार्य फ़ील्ड है; बाकी सब वैकल्पिक है।

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

const editor = Editor.create({
  containerId: 'editor',
  onChange: data => console.log(data),
  placeholder: 'Start writing…',
  theme: 'auto',
});

संपादित करें और सहेजें

उपयोगकर्ताओं के लिखने के बाद EditorData JSON रूप में सीरियलाइज़ करने के लिए editor.data.extract() कॉल करें। पेलोड में प्रत्येक ब्लॉक के साथ एक { blocks } ऐरे होता है।

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [
//     { id: 'abc123', type: 'paragraph', data: { html: 'Hello world' } },
//     ...
//   ]
// }

केवल-पढ़ने के लिए रेंडर करें

कहीं भी संग्रहीत EditorData से HTML आउटपुट करने के लिए Renderer.render का उपयोग करें। Renderer कोई स्थिति नहीं रखता। इसे केवल containerId वाले div की आवश्यकता है।

import { Renderer } from '@clepit/core';

Renderer.render({
  containerId: 'output',
  data: savedEditorData,
  margins: { bottom: 0, top: 0 },
});

फ्रेमवर्क-अज्ञेयवादी

@clepit/core की कोई पीयर फ्रेमवर्क निर्भरता नहीं है। Editor.create और Renderer.render दोनों को केवल पूर्ण DOM API चाहिए: React, Vue, Svelte, या वैनिला स्क्रिप्ट सभी सीधे काम करते हैं।