ప్రాథమిక వినియోగం ​

ఈ మార్గదర్శిని బ్రౌజర్‌లో క్లయింట్-సైడ్ రెండర్ అయ్యే (CSR) ఎడిటర్‌ను వివరిస్తుంది: వింగ్స్‌ను ఎంచుకోండి, ఎడిటర్, UIని మౌంట్ చేయండి, ఆపై NABI TREE JSONని భద్రపరచి పునరుద్ధరించండి.

ఇన్‌స్టాల్ చేసి ప్రాథమిక మార్కప్‌ను చేర్చండి ​

npm install nabi-note

ఎడిటర్, ప్రచురిత కంటెంట్ రెండింటికీ ఒకే స్టైల్‌షీట్‌ను లోడ్ చేయండి. contenteditableను మీరే చేర్చవద్దు; దాన్ని mountSurface() నిర్వహిస్తుంది.

import 'nabi-note/nabi.css'

<div class="nabi">
  <div id="toolbar" class="nabi-toolbar"></div>
  <div id="content" class="nabi-content"></div>
</div>

ఎడిటర్‌ను మౌంట్ చేయండి ​

allBasic() అప్లికేషన్-ప్రత్యేక కనెక్షన్ లేకుండా పనిచేసే అధికారిక వింగ్స్‌ను ఎంచుతుంది. అప్‌లోడ్, ఫైల్ నిల్వ, పత్ర తేడాల వంటి సేవ-అనుసంధాన వింగ్స్‌ను వాటి ప్రత్యేక మార్గదర్శినిలో చెప్పినట్లు చేర్చండి.

import { createNabiWith, mountSurface, mountToolbar, wings } from 'nabi-note'

const content = document.querySelector<HTMLElement>('#content')!
const toolbarRoot = document.querySelector<HTMLElement>('#toolbar')!

const { nabi, registry } = createNabiWith(wings().allBasic(), {
  locale: 'te',
  onError: (error) => console.error(error),
  undoLimit: 200,
  typingMergeMs: 1000,
})

const surface = mountSurface({
  nabi,
  registry,
  root: content,
  locale: 'te',
  placeholder: 'ఏదైనా రాయండి.',
})
const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  locale: 'te',
})

locale టూల్‌బార్, సహాయక వచనాన్ని నియంత్రిస్తుంది; ప్రతి UI మౌంట్‌కు ఒకే విలువ ఇవ్వండి. placeholder ఖాళీ ఎడిటర్‌లోనే కనిపిస్తుంది. onError ఆదేశాలు, కాల్‌బ్యాక్‌ల నుంచి వేరుచేసిన వైఫల్యాలను అందుకుంటుంది. undoLimit అనేది అన్‌డూ ఎంట్రీల సంఖ్య (డిఫాల్ట్ 200). typingMergeMs వరుస టైపింగ్‌ను ఒక అన్‌డూ దశగా కలిపే విరామం; ప్రతి చొప్పింపును వేరుగా ఉంచడానికి 0 ఇవ్వండి.

బ్లాక్ కంటైనర్ నుంచి బయటకు రావడానికి వరుస Enter నొక్కుళ్ల మధ్య డిఫాల్ట్ విరామం 180ms. రెండుసార్లు Esc, Shift నొక్కడానికి 350ms కొనసాగుతుంది. mountSurface() లో doubleEnterMs స్పష్టంగా ఇస్తే Enter తో పాటు రెండుసార్ల Esc విరామమూ మారుతుంది.

ప్రతి ఎడిటర్‌కు ఒకదానితో ఒకటి మిళితం కాని స్వంత కంటెంట్, టూల్‌బార్ రూట్‌లు అవసరం. పేజీలో అనేక ఎడిటర్‌లు ఉంటే, ఫోకస్, షార్ట్‌కట్‌లు కలవకుండా ప్రతి టూల్‌బార్‌కు surface ద్వారా దాని స్వంత ఎడిటర్ సర్ఫేస్ ఇవ్వండి.

టూల్‌బార్ అమరిక ​

డిఫాల్ట్ టూల్‌బార్ శీర్షికలు, పాఠ్య ఆకృతి, అమరిక, జాబితాలు, చేర్పు, పత్ర సాధనాలను ఈ క్రమంలో సమూహపరుస్తుంది; మధ్య నిలువు విభాజకాలు చూపిస్తుంది. డెస్క్‌టాప్‌లో అన్ని సాధనాలు అనేక వరుసల్లో, మొబైల్‌లో త్వరిత సాధనాలు, అన్ని సాధనాల బటన్ ఒక వరుసలో కనిపిస్తాయి. పట్టిక, చిత్రం, తేలియాడే ప్రాంతపు లక్షణ సాధనాలు కింద కనిపిస్తాయి; పాఠ్య సాధనాలతో కలిపి వాడవచ్చు.

groups తో సమూహాల క్రమాన్ని, quick తో మొబైల్ త్వరిత సాధనాల క్రమాన్ని మార్చండి. ఉదాహరణకు తరచూ చిత్రాలు చేర్చే ఎడిటర్ media సమూహాన్ని ముందుకు తేవచ్చు.

import { TOOLBAR_GROUPS, mountToolbar } from 'nabi-note'

const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  locale: 'te',
  groups: ['media', ...TOOLBAR_GROUPS.filter((group) => group !== 'media')],
  quick: ['b', 'i', 'tc', 'img'],
})

త్వరిత సాధనాలు ఇచ్చిన క్రమంలో విభాజకాలు లేకుండా ఉంటాయి. సమూహం లోపల వింగ్ నమోదు క్రమం వర్తిస్తుంది. SSR ద్వారా టూల్‌బార్‌ను ముందే రెండర్ చేస్తే సర్వర్, బ్రౌజర్‌కు ఒకే సమూహ క్రమం ఇవ్వండి. తెర వెడల్పును బట్టి అమరికను CSS థీమ్‌లు వివరిస్తాయి.

mountHints() కలిపితే Shift రెండుసార్లు నొక్కి కీబోర్డ్‌తో సాధనాలు ఎంచుకోవచ్చు. Tab సమూహాన్ని మారుస్తుంది; బాణం కీలు అదే సమూహంలోని చిహ్నాల మధ్య కదులుతాయి. డెస్క్‌టాప్, పూర్తి తెరలో కనిపించే టూల్‌బార్, మొబైల్‌లో అన్ని సాధనాల ప్యాలెట్ ఉపయోగిస్తారు.

చిత్ర ప్యానెల్, URL ఇన్‌పుట్, ఫైల్ ఎంపికలు తెరిచినప్పటి ఎంపికను గుర్తుంచుకుంటాయి. కర్సర్‌ను మాత్రమే కదిపితే అసలు స్థానంలో చేర్పు జరుగుతుంది; పత్రాన్ని సవరించినా మార్చినా ఇన్‌పుట్ రద్దు చేసి సమాచారం చూపిస్తాయి. Undo తో అదే కంటెంట్ తిరిగి వచ్చినా పాత ఎంపికను మళ్లీ వాడవు.

వింగ్స్‌ను ఎంచుకోండి ​

మీకు అవసరమైన ఫీచర్‌లను మాత్రమే ఉంచడానికి use(), drop() వాడండి. ప్రతి వింగ్ పేజీ అది స్వీకరించే ఎంపికలను వివరిస్తుంది.

const selected = wings()
  .allBasic()
  .drop('youtube')
  .use('upload')

const { nabi, registry } = createNabiWith(selected, { locale: 'te' })

చిన్న బండిల్ కోసం boldWing, imageWing వంటి అవసరమైన వింగ్స్‌ను మాత్రమే అర్రేగా ఇవ్వండి. తెలియని పేర్లు, చెల్లని ఎంపికలు, లేని ఆధారాలు ఎడిటర్ సృష్టించే సమయంలోనే విఫలమవుతాయి.

భద్రపరచి లోడ్ చేయండి ​

పత్రాన్ని మళ్లీ సవరించాలంటే getJson() అవుట్‌పుట్‌ను NABI TREE JSONగా భద్రపరచండి. getHtml() ప్రచురిత అవుట్‌పుట్ కోసం. ఎడిటర్‌కే పరిమితమైన getEditorHtml() ఫలితాన్ని ఎప్పుడూ నిల్వ చేయవద్దు.

const json = nabi.getJson()
await saveToServer(json)

const saved = await loadFromServer()
if (!nabi.setJson(saved)) showError('భద్రపరిచిన పత్రాన్ని చదవలేకపోయాం.')

const publishedHtml = nabi.getHtml()

బయటి HTMLను దిగుమతి చేయడానికి setHtml() వాడండి. బ్రౌజర్ ఎడిటర్ ఇప్పటికే తన HTML పార్సర్‌ను అందిస్తుంది కాబట్టి పార్సర్ ఎంపిక అవసరం లేదు. చెల్లని ఖాళీ కాని ఇన్‌పుట్‌కు setJson(), setHtml() falseను ఇచ్చి ప్రస్తుత పత్రాన్ని మార్చవు.

nabi.setHtml('<p>దిగుమతి చేసిన పత్రం</p>')

JSON, HTML రెండూ నమ్మలేని ఇన్‌పుట్‌లు. NABI NOTE వాటిని నమోదైన వింగ్స్, వాటి అనుమతించిన నియమాల ద్వారా చదువుతుంది; కానీ ఇది అప్‌లోడ్ అనుమతి లేదా మీ సేవ భద్రతా విధానానికి ప్రత్యామ్నాయం కాదు.

సాధారణ APIలు ​

ఖచ్చితమైన రకాలు, ప్రతి ఆర్గుమెంట్ కోసం ముందుగా ఇన్‌స్టాల్ చేసిన ప్యాకేజీ డిక్లరేషన్‌లను చూడండి. ఆటోమేషన్ సాధనాలు ఇంగ్లీష్ API సూచనను కూడా వాడవచ్చు.

మౌంట్‌లను తొలగించండి ​

సృష్టించిన క్రమానికి విరుద్ధంగా అన్‌మౌంట్ చేయండి. సవరణ రూట్‌లోని innerHTMLను నేరుగా మార్చవద్దు; setJson(), setHtml(), applyCommand() వంటి పబ్లిక్ APIల ద్వారా పత్రాలను మార్చండి.

function dispose() {
  toolbar.unmount()
  surface.unmount()
}