መጀመር

ጥቅሉን ይጫኑ፣ በመለያ ወደ ማንኛውም መያዣ ኤለመንት ያስገቡት እና በፈለጉ ጊዜ ንጹህ JSON ያውጡ። Clepit ምንም የframework ጥገኝነት ስለሌለው ያለ መጠቅለያ ወደ React፣ Vue፣ Svelte ወይም vanilla JavaScript ይገባል።

ጥቅሉን ይጫኑ

@clepit/core ን ወደ ፕሮጀክትዎ ያክሉ። አርታኢው እንደ አንድ ESM ጥቅል እና TypeScript ዓይነቶች ይቀርባል።

bun add @clepit/core

አርታኢ ይፍጠሩ

አንድ div ያክሉ፣ ከዚያ Editor.create ን ከቀረቡ EditorConfig አማራጮች ጋር ይጥሩ። containerId አስፈላጊ ሲሆን ሌሎቹ ሁሉ አማራጭ ናቸው።

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

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

ያርትዑ እና ያስቀምጡ

ተጠቃሚዎቹ ሲጽፉ editor.data.extract() ን ይጥሩ ወደ EditorData JSON ዩ ቅርጽ ለማርፈድ። ጥቅሉ { 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 ወይም ቫኒላ ስክሪፕት ሁሉም ቀጥ ብሎ ይሰራሉ።