ውቅር

EditorConfig እና RendererConfig ለእያንዳንዱ ብጁ ማድረጊያ የግቤት ነጥቦች ናቸው። ወይ ለEditor.create() ወይም ለRenderer.render() ያስተላልፉ። containerId ብቻ (እና ለRenderer data) ያስፈልጋል፣ ሌሎቹ ሁሉ አስተማማኝ ነባሪዎች አሏቸው።

EditorConfig

EditorConfig ብቸኛ ክርክር ሆኖ ወደ Editor.create() ያስተላልፉ። አስፈላጊው containerId ከEditor.create() ከመጠራቱ በፊት ነባር DOM ኤለሜንት ID ጋር መዛመድ አለበት።

አማራጭ	አይነት	አስፈላጊ	መግለጫ
containerId	string	አዎ	አርታኢውን የሚያስተናግደው DOM ኤለሜንት ID። Editor.create() ከመጠራቱ በፊት በDOM ውስጥ መኖር አለበት።
maxHeight	number	አይ	የአርታኢው ከፍተኛ ቁመት በፒክሰል። ምንም የቁመት ወሰን ለማይፈልጉ 0 (ነባሪ) ያዘጋጁ።
minHeight	number	አይ	የአርታኢው ዝቅተኛ ቁመት በፒክሰል። ነባሪ 300 ነው።
onChange	(data: EditorData) => void	አይ	ሰነዱ በተቀየረ ቁጥር የሚተኰሰ ኮልባክ። ሙሉ EditorData ቅጽሎ ይቀበላል።
onReady	() => void	አይ	አርታኢው ሙሉ በሙሉ ተጀምሮ የ API ጥሪዎችን ለመቀበል ዝግጁ ሲሆን የሚተኰሰ ኮልባክ።
placeholder	string	አይ	አርታኢው ባዶ በሚሆንበት ጊዜ የሚታይ ያስቀምጫ ጽሑፍ። ነባሪ "Start writing..." ነው።
initialData	EditorData	አይ	አርታኢው ሲጀምር ለመጫን አስቀድሞ የተሞላ EditorData።
initialView	'edit' \| 'preview' \| 'json'	አይ	የጀምሪያ እይታ ሁነታ። ከ: edit, preview, json አንዱ። ነባሪ "edit" ነው።
allowJsonViewEditing	boolean	አይ	እውነት ሲሆን፣ የJSON እይታ ሊስተካከል ይችላል እና ለውጦቹ ወደ ሰነዱ ይመለሳሉ። ነባሪ false ነው።
margins	BlockMargins	አይ	ለእያንዳንዱ ብሎክ የሚተገበር ዓለምአቀፍ የላይ እና ታች ክፍተት (በፒክሰል)። በብሎክ ደረጃ ውቅሮች ቅድሚያ ያገኛሉ።
styles	EditorStyles	አይ	የአርታኢ ክሮም (ቶልባሮች፣ ዲያሎጎች፣ ቁጥጥሮች) ጥሩ ዝርዝር CSS ብጁ ማድረጊያ ለEditorStyles ነገር።
classNames	EditorClassNames	አይ	ለአርታኢ ክሮም ኤለሜንቶች የCSS ክፍል ስሞችን ለማያያዝ EditorClassNames ነገር።
imageUploader	UploadFunction	አይ	ምስል ፋይል የሚያስቀምጥ እና የህዝብ URL ሕብረቁምፊ የሚመልስ ያልሰሙ ተግባር።
audioUploader	UploadFunction	አይ	የኦዲዮ ፋይል የሚያስቀምጥ እና የህዝብ URL ሕብረቁምፊ የሚመልስ ያልሰሙ ተግባር።
videoUploader	UploadFunction	አይ	ቪዲዮ ፋይል የሚያስቀምጥ እና የህዝብ URL ሕብረቁምፊ የሚመልስ ያልሰሙ ተግባር።
theme	'auto' \| 'light' \| 'dark'	አይ	የቀለም ስርዓተ ጭነት። ከ: auto (ስርዓቱን ይከተላል)፣ light፣ dark። ነባሪ auto ነው።
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	አይ	በሁነታ ደረጃ ቶከን ቅድሚያዎች። ሙሉ ጭነቱን ሳይተኩ ቀለሞችን ለማበጀት light እና/ወይም dark ቶከን ካርታዎችን ያቅርቡ።

TypeScript

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

const editor = Editor.create({
  containerId: 'editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
  imageUploader: async file => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/api/upload', { body: form, method: 'POST' });
    const { url } = await res.json();
    return url;
  },
});

RendererConfig

RendererConfig ብቸኛ ክርክር ሆኖ ወደ Renderer.render() ያስተላልፉ። containerId እና data ሁለቱም ያስፈልጋሉ።

አማራጭ	አይነት	አስፈላጊ	መግለጫ
containerId	string	አዎ	የተሰናዳ ውጤቱ የሚወጋ DOM ኤለሜንት ID።
data	EditorData	አዎ	ሊሰናዳ የሚቀርበው EditorData ሰነድ። ያስፈልጋል።
margins	BlockMargins	አይ	ለእያንዳንዱ የሰናዳ ብሎክ የሚተገበር ዓለምአቀፍ የላይ እና ታች ክፍተት (በፒክሰል)።
styles	BlockStyles	አይ	ሊሰናዱ ለሚቀርበው ውጤት ለብሎክ-አይነት CSS ብጁ ማድረጊያ BlockStyles ካርታ።
classNames	BlockClassNames	አይ	ሊሰናዱ ለሚቀርበው ውጤት ለብሎክ-አይነት CSS ክፍል ስሞች BlockClassNames ካርታ።
editorClassNames	EditorClassNames	አይ	ይነሰናዱ የሚቀርቡ ኮምፖኔንቶችን (ለምሳሌ ለፓራግራፎች tooltip ክፍል ስሞች) ለሚያሳዩ ብሎኮች EditorClassNames።
configs	Partial<BlockTypeOutputConfigs>	አይ	ለብሎክ OutputConfig ነገሮች ከፊል ካርታ። እያንዳንዱ ግቤት የብሎክ ደረጃ ክፍተቶችን እና tooltip ክፍል ስሞችን ሊያዘጋጅ ይችላል።
theme	'auto' \| 'light' \| 'dark'	አይ	የቀለም ስርዓተ ጭነት። ከ: auto፣ light፣ dark አንዱ።
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	አይ	ሊሰናዱ ለሚቀርቡ ውጤቶች ሁነታ ደረጃ ቶከን ቅድሚያዎች።

TypeScript

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

const data: EditorData = await fetch('/api/content/123').then(r => r.json());

Renderer.render({
  containerId: 'output',
  data,
  theme: 'auto',
  margins: { bottom: 16, top: 16 },
});

በብሎክ ደረጃ ስታይል ማድረጊያ

EditorConfig እና RendererConfig ሁለቱም styles፣ classNames እና configs በብሎክ አይነት ቁልፍ ይቀበላሉ። እነዚህን ለዒላማ ቅድሚያዎች ይጠቀሙ፤ ሙሉ ቶከን ማጣቀሻ ለThemes ገጽ ይመልከቱ።

TypeScript

import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';

const editorStyles: EditorStyles = {
  blockToolbar: { container: { borderRadius: '8px' } },
};

const blockStyles: BlockStyles = {
  header: { h1: { fontFamily: 'Georgia, serif' } },
  paragraph: { lineHeight: '1.75' },
  table: { cell: { padding: '8px 12px' } },
};

const blockClassNames: BlockClassNames = {
  paragraph: 'prose-paragraph',
  header: { h1: 'prose-h1', h2: 'prose-h2' },
  alert: { info: 'alert-info', error: 'alert-error' },
};

Editor.create({
  containerId: 'editor',
  styles: editorStyles,
});

Renderer.render({
  containerId: 'output',
  data,
  styles: blockStyles,
  classNames: blockClassNames,
});

መጀመር

ማጣቀሻ

የአገልጋይ ኤፒአይ

መመሪያዎች

ውቅር

EditorConfig

RendererConfig

በብሎክ ደረጃ ስታይል ማድረጊያ