அடிப்படைப் பயன்பாடு ​

இந்த வழிகாட்டி உலாவியில் இயங்கும் கிளையன்ட்-சைடு ரெண்டரிங் (CSR) திருத்தியை விளக்குகிறது: wing-களைத் தேர்ந்தெடுத்து, திருத்தியையும் அதன் UI-யையும் mount செய்து, பின்னர் NABI TREE JSON-ஐச் சேமித்து மீட்டெடுக்க வேண்டும்.

நிறுவல் மற்றும் அடிப்படை HTML ​

npm install nabi-note

திருத்திக்கும் வெளியிடப்பட்ட உள்ளடக்கத்திற்கும் ஒரே stylesheet-ஐ ஏற்றுங்கள். 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() பயன்பாட்டுக்கே உரிய இணைப்பு இல்லாமல் இயங்கும் அதிகாரப்பூர்வ wing-களைத் தேர்ந்தெடுக்கிறது. பதிவேற்றம், கோப்பு சேமிப்பு அல்லது ஆவண வேறுபாடு போன்ற சேவையுடன் இணையும் wing-களை அவற்றின் தனிப்பட்ட வழிகாட்டிகளில் கூறியபடி சேர்க்கவும்.

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: 'ta',
  onError: (error) => console.error(error),
  undoLimit: 200,
  typingMergeMs: 1000,
})

const surface = mountSurface({
  nabi,
  registry,
  root: content,
  locale: 'ta',
  placeholder: 'எதையாவது எழுதுங்கள்.',
})
const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  locale: 'ta',
})

locale கருவிப்பட்டி மற்றும் உதவி உரையைக் கட்டுப்படுத்துகிறது; ஒவ்வொரு UI mount-க்கும் அதே மதிப்பைத் தரவும். placeholder காலியான திருத்தியில் மட்டும் காட்டப்படும். onError கட்டளைகள் மற்றும் callback-களில் தனிமைப்படுத்தப்பட்ட தோல்விகளைப் பெறுகிறது. undoLimit என்பது செயல்தவிர்ப்பு பதிவுகளின் எண்ணிக்கை (இயல்புநிலை 200). typingMergeMs தொடர்ச்சியான தட்டச்சலை ஒரே செயல்தவிர்ப்பு படியாக இணைக்கும் இடைவெளி; ஒவ்வொரு உள்ளீட்டையும் தனியாக வைத்திருக்க 0 என அமைக்கவும்.

தொகுதிக் கொள்கலனிலிருந்து வெளியேறத் தொடர்ந்து Enter அழுத்துவதற்கான இயல்புநிலை இடைவெளி 180ms. Esc மற்றும் Shift இரட்டை அழுத்தத்தின் இயல்புநிலை 350ms ஆகவே இருக்கும். mountSurface() இல் doubleEnterMs நேரடியாகக் கொடுத்தால் Enter மட்டுமன்றி இரட்டை Esc இடைவெளியும் மாறும்.

ஒவ்வொரு திருத்திக்கும் ஒன்றுடன் ஒன்று ஒட்டாத தனி உள்ளடக்க மற்றும் கருவிப்பட்டி root-கள் தேவை. பல திருத்திகள் உள்ள பக்கத்தில், கவனமும் விசைப்பலகைக் குறுக்குவழிகளும் ஒன்றோடொன்று கலக்காமல் இருக்க ஒவ்வொரு கருவிப்பட்டியின் surface-க்கும் அதன் சொந்த திருத்தி surface-ஐத் தரவும்.

கருவிப்பட்டையை அமைத்தல் ​

இயல்புநிலைக் கருவிப்பட்டை தலைப்பு, உரை வடிவமைப்பு, சீரமைப்பு, பட்டியல், சேர்த்தல், ஆவணக் கருவிகள் என்ற வரிசையில் குழுவாக்கி, குழுக்களிடையே செங்குத்துப் பிரிப்பான்களைக் காட்டும். டெஸ்க்டாப்பில் எல்லாக் கருவிகளும் பல வரிகளில்; மொபைலில் விரைவுக் கருவிகளும் அனைத்துக் கருவிகள் பொத்தானும் ஒரு வரியில் தோன்றும். அட்டவணை, படம், மிதக்கும் பகுதியின் பண்புக் கருவிகள் கீழே தோன்றுவதால் உரைக் கருவிகளுடன் சேர்த்துப் பயன்படுத்தலாம்.

groups மூலம் குழு வரிசையையும் quick மூலம் மொபைல் விரைவுக் கருவிகளின் வரிசையையும் மாற்றவும். உதாரணமாக அடிக்கடி படம் சேர்க்கும் திருத்தியில் media குழுவை முன்னே கொண்டுவரலாம்.

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

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

விரைவுக் கருவிகள் கொடுத்த வரிசையைப் பிரிப்பானின்றிப் பின்பற்றும். குழுவுக்குள் இறக்கைப் பதிவு வரிசை பயன்படும். SSR மூலம் கருவிப்பட்டையை முன்வரைவாக்கும்போது சேவையகத்திற்கும் உலாவிக்கும் ஒரே குழு வரிசையை வழங்கவும். திரை அகலத்தைச் சார்ந்த அமைப்பு CSS தீம்களில் விளக்கப்பட்டுள்ளது.

mountHints() இணைத்தால் Shift இருமுறை அழுத்தி விசைப்பலகையால் கருவிகளைத் தேர்ந்தெடுக்கலாம். Tab குழுவை மாற்றும்; அம்பு விசைகள் அதே குழுவின் சின்னங்களுக்கு இடையே நகரும். டெஸ்க்டாப் மற்றும் முழுத்திரையில் தெரியும் கருவிப்பட்டையும், மொபைலில் அனைத்துக் கருவிகளின் தட்டும் பயன்படும்.

படப் பலகை, URL உள்ளீடு, கோப்புத் தேர்விகள் திறந்தபோதைய தேர்வை நினைவில் வைக்கும். சுட்டியை மட்டும் நகர்த்தியிருந்தால் அசல் இடத்தில் சேர்க்கும்; ஆவணத்தைத் திருத்தியோ மாற்றியோ இருந்தால் உள்ளீட்டை ரத்து செய்து அறிவிக்கும். செயல்தவிர்ப்பால் அதே உள்ளடக்கம் திரும்பினாலும் பழைய தேர்வை மீண்டும் பயன்படுத்தாது.

wing-களைத் தேர்ந்தெடுங்கள் ​

தேவையான வசதிகளை மட்டும் வைத்திருக்க use() மற்றும் drop()-ஐப் பயன்படுத்துங்கள். ஒவ்வொரு wing பக்கமும் அது ஏற்கும் விருப்பங்களை ஆவணப்படுத்துகிறது.

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

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

சிறிய bundle-க்கு boldWing, imageWing போன்ற தேவையான wing-களை மட்டும் array ஆக வழங்கலாம். அறியப்படாத பெயர்கள், தவறான விருப்பங்கள் மற்றும் காணாத சார்புகள் திருத்தி உருவாகும்போதே உடனடியாகத் தோல்வியடையும்.

சேமித்தல் மற்றும் ஏற்றுதல் ​

ஆவணத்தை மீண்டும் திருத்த வேண்டுமென்றால் 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 parser-ஐ வழங்குவதால் parser விருப்பம் தேவையில்லை. செல்லாத வெறுமையல்லாத உள்ளீட்டுக்கு setJson() மற்றும் setHtml() இரண்டும் false-ஐத் திருப்பி நடப்பு ஆவணத்தை மாற்றாமல் விடுகின்றன.

nabi.setHtml('<p>இறக்குமதி செய்யப்பட்ட ஆவணம்</p>')

JSON மற்றும் HTML இரண்டுமே நம்பமுடியாத உள்ளீடுகள். NABI NOTE அவற்றைப் பதிவுசெய்யப்பட்ட wing-கள் மற்றும் அவற்றின் அனுமதி விதிகள் வழியாகப் படிக்கிறது; ஆனால் அது பதிவேற்ற அனுமதி அல்லது உங்கள் சேவையின் பாதுகாப்புக் கொள்கையை மாற்றாது.

பொதுவான API-கள் ​

துல்லியமான வகைகள் மற்றும் ஒவ்வொரு argument-க்கும் முதலில் நிறுவியுள்ள package declaration-களைப் பாருங்கள். தானியக்கக் கருவிகள் ஆங்கில API reference-ஐயும் பயன்படுத்தலாம்.

mount-களை அகற்றுதல் ​

உருவாக்கிய வரிசையின் தலைகீழ் வரிசையில் unmount செய்யுங்கள். திருத்தி root-இன் innerHTML-ஐ நேரடியாக மாற்றாதீர்கள்; setJson(), setHtml() அல்லது applyCommand() போன்ற பொது API-கள் வழியாக ஆவணங்களை மாற்றுங்கள்.

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