Fuka-fukai
Nau’in rubutu na asaliTazara


NABI NOTE

Editan WYSIWYG na buɗaɗɗen tushe


NABI NOTE editan WYSIWYG ne na buɗaɗɗen tushe; an ware tsara rubutu, daidaitawa, tebur, ɗorawa da sauran siffofi daga ginshiƙinsa zuwa kayayyaki masu zaman kansu da ake kira fuka-fukai. Za ka iya zaɓar fuka-fukan da kake buƙata kawai don haɗa edita, kuma ka haɗa waɗanda ka gina da kanka. An rubuta shi da JavaScript tsantsa, don haka ana iya amfani da shi daga React, Vue da makamantansu. A shafin da ba shi da tsarin ginawa, za ka iya farawa nan da nan da ɗakin karatu na CDN. Tsarin takardarsa, NABI TREE, ana iya canza shi zuwa HTML ko a muhallin Node.js da ba shi da DOM na burauza. Dokokin da aka yi rajista suna gyara takardun shigarwa; idan an ƙirƙiri HTML, ana tsere wa rubutu da siffofi kuma ana duba adireshin mahaɗi. Duk da haka, fuka-fukai na musamman da bayanan da suka zo daga sabar dole a sake dubawa bisa manufar tsaron aikace-aikacen. Masu canji na CSS da shimfiɗa mai amfani da rem suna ba ka damar daidaita jigo da girma, kuma akwai yanayin duhu da saitin nau’in rubutu don harsuna masu yawa. Tsara tebur, tarihin gida da aikin takardu da AI ke taimakawa duk suna aiki da tsarin takarda ɗaya.


Nau’in rubutu

An tanadi madadin nau’ikan rubutu bisa harshe ga sans serif (na asali), serif, mai faɗi ɗaya da rubutun hannu. Idan babu rubutun da ya dace da nau’in da aka zaɓa, za a nuna na asalin burauzar. Shafin da ke ɗauke da editan ne yake ƙayyade nau’in rubutunsa na asali.


A ƙasa an nuna kowace iyali a harsuna da yawa.


산세리프 · ゴシック体 · 无衬线 · Serifenlos · Sans empattement · Sin serifa · Sem serifa · Без засечек · بلا زخارف · सैन्स सेरिफ़ · স্যান্স সেরিফ · سانس سیرف · Tanpa serif · بدون سریف · सॅन्स सेरिफ · Không chân · శాన్స్ సెరిఫ్ · Mara seref · Sans serif · Bila serif · சான்ஸ் செரிஃப் · ไร้เชิง · Senza grazie


세리프 · 明朝体 · 衬线 · Serif · Avec empattement · Con serifa · Com serifa · С засечками · بزخارف · सेरिफ़ · সেরিফ · سیرف · Berserif · سریف · सेरिफ · Có chân · సెరిఫ్ · Mai seref · Yenye serif · செரிஃப் · มีเชิง · Con grazie


고정폭 · 等幅 · 等宽 · Dicktengleich · Chasse fixe · Monoespaciada · Monoespaçada · Моноширинный · ثابت العرض · मोनोस्पेस · মনোস্পেস · یکساں چوڑائی · Lebar tetap · تک‌فاصله · Đơn cách · మోనోస్పేస్ · Tazara ɗaya · Eş aralıklı · Nafasi moja · ஒற்றையகலம் · ความกว้างคงที่ · Monospaziato · Monospace


필기체 · 筆記体 · 手写体 · Schreibschrift · Cursive · Cursiva · Рукописный · خط اليد · हस्तलिपि · হস্তলিপি · رواں خط · Tulisan tangan · دست‌نویس · हस्ताक्षर · Chữ viết tay · చేతిరాత · Rubutun hannu · El yazısı · Mwandiko · கையெழுத்து · ลายมือ · Corsivo



Girman rubutu

Ƙarami ƙwarai

Ƙarami

Babba

Babba ƙwarai



Kan take

A layi fanko, rubuta # sannan sarari don mayar da shi kan take nan take.

H1

H2

H3

H4

H5
H6



Mai kauri · Karkace · Ƙarƙashin layi · Layin gogewa

Mai kauri karkace ƙarƙashin layi layin gogewa ana iya amfani da su tare a kan harafi ɗaya.

Ana iya tara su ma.

Rubutu na sama da na ƙasa

Faɗin wurin 3.5m2 kuma ana ƙara bayanin ƙasa haka.1

Ruwa H2O.



Launin rubutu · Alamar haske

An zaɓi launuka domin su kasance masu sauƙin karantawa a yanayin haske da duhu.

Launin rubutu Kore · Coral · Violet · Amber · Shuɗi

Alamar haske Rawaya · Kore · Cyan · Ruwan hoda · Shunayya · Lemu



Mahaɗi

Shigar da adireshi, zai zama mahaɗi.

Ana iya amfani da URL na http:// da https://, da hanyoyin shafi guda masu farawa da . ko /. Ba a yarda da adireshi kamar javascript: ba.

Misali, rubuta https://nabi.saro.me sannan ka danna sarari ko Enter — zai canza da kansa kamar yadda ka gani a nan.

Buɗe mahaɗi

Takardar tana ajiye adireshin mahaɗi kawai; shafin da yake nuna takardar ne yake yanke yadda mahaɗai za su buɗe.

Mahaɗin abin haɗe

Fayilolin da ba hotuna ba suna kasancewa a matsayin mahaɗan abin haɗe kamar na ƙasa.

Abin haɗe: ana adana mahaɗinsa a cikin takardar.



Daidaitawa

A daidaita hagu

A daidaita tsakiya

A daidaita dama

Ba za a iya amfani da daidaitawa a kan taken ba.



Jeri

Jerin alama

A layi fanko, rubuta - sannan danna sarari — zai zama jerin alama nan take.

  • Wannan abu ne mai alama

    • Tab / Shift+Tab suna shigar da rubutu ciki ko fitar da shi.

Jeri mai lamba

A layi fanko, rubuta 1. sannan danna sarari domin samun jeri mai lamba.

  1. Na farko

  2. Na biyu

  3. Na uku

Jerin dubawa

A layi fanko, rubuta [ ] ko [x] sannan danna sarari domin samun jerin dubawa.

  • An duba wannan abu.

  • Ba a duba wannan ba tukuna.



Tebur

Tantanin jadawali na iya ɗaukar sakin layi da tubalai da yawa, kuma launin baya na taimakawa rarrabe abin da ke ciki. Gwada gyara rubutu da hotunan jadawalin da ke ƙasa kai tsaye.

Kayan bayani

Bayanan aiki

Hoto da bayaninsa a tantani guda.

Sakin layi cikin sauƙi

Danna Enter don sabon sakin layi, ko Shift+Enter don sauka sabon layi a cikin sakin layi ɗaya.

  • Sauya launin bayan tantani

  • Tura jeri ciki da Tab

  • Zaɓi tantanai da yawa a ba su launi ɗaya

Danna don ganin shawarwarin gyarawa

Tantani na iya ɗaukar ɓangaren naɗewa, zance, lamba da bidiyo.

Haɗa tantanai yana kiyaye abubuwan cikinsu bisa jerinsu.

Danna cikin tantani don nuna launin baya da kayan aikin layuka da ginshiƙai. Zaɓi tantanai da yawa don sauya launi da daidaitawarsu lokaci guda. Don daidaita jadawalin gaba ɗaya, zaɓi “Zaɓi tebur”, sannan yi amfani da kayan daidaitawa.

Jadawali mai launuka ko tubalai da yawa yana kasancewa HTML ko da an adana shi a Markdown.

Launukan bayan tantani

An nuna duk launukan bayan tantani da ake tallafawa a nan. Danna tantani don sauya launinsa, ko zaɓi “Na asali” a kayan saituna don cire launin baya.

Rawaya

yellow

Kore

green

Launin cyan

cyan

Ruwan hoda

pink

Shunayya

purple

Ruwan lemu

orange

Tsara ginshiƙi

Danna Dubawa, sannan ka danna ƙwayoyin kan Hannu da Farashi bi da bi.

Samfuri

Hannu

Farashi

Nauyi

NB-7

1,200

349

1.2 kg

NB-9

20,000

99

0.9 kg

NB-12

3,500

1,299

1.4 kg

NB-80

900

8,900

2.1 kg

NB-100

TBD

12,999

2.4 kg

Farashi yana ɗauke da lambobi kawai, saboda haka ana tsara ginshiƙin bisa ƙimar lambobi.

Hannu yana ɗauke da lambobi da rubutu, saboda haka ana tsara ginshiƙin bisa jerin haruffa.



Mai raba

Rubuta --- sannan danna Enter don mayar da shi mai raba.




Hoto

Faɗin yana daga 30% zuwa 100%, kuma yana iya zama hagu, tsakiya ko dama.



Yanki mai iyo

A taƙaice

Ƙaramin yanki na ƙarin rubutu, hotuna da jadawali.

Matsayi

Dama

Mafi girman faɗi

40%

Yi amfani da yanki mai iyo don ƙarin bayani ko ƙananan kayan bayani a gefen babban rubutu. Idan takarda tana da faɗi, wannan rubutu yana gudana a gefen yankin. Danna cikinsa don gyara rubutu da saka hotuna ko jadawali a edita ɗaya.

Sanya siginan rubutu cikin yankin don buɗe kayan saitunansa. Sauya tsakanin hagu da dama, sannan zaɓi mafi girman faɗi na 20, 30, 40 ko 50% wanda ya dace da rubutu. Jadawali da hotunan da aka manna ma suna zama a cikin yankin.

Hakanan za ka iya sanya sakin layin da aka zaɓa cikin yanki. Maɓallin warware yankin da ke gefen faɗi yana barin abin da ke ciki a babban rubutu. Dubawa tana ɓoye layin ɗigo na gyarawa; a takarda mai ƙunci ko wajen bugawa, duk abin yana bin ginshiƙi ɗaya.


YouTube



Ɗorawa

Gwada jan hoto ko fayil zuwa editan.

Wannan gwaji ba ya aika fayiloli zuwa uwar garke ta gaske. Haɗa mai ɗorawa a manhajarka don adana su a uwar garke.

Bayan buɗe mai zaɓar hoto ko fara ɗorawa, motsa siginan rubutu kaɗai ba ya sauya wurin sakawa na farko. Gyara takarda yayin jira yana soke sakawa kuma yana nuna sanarwa. Ci gaba da sakamakon ɗorawar da aka fara cikin tantani suna zama a wannan tantanin.



Ambato

A layi fanko, rubuta > sannan danna sarari domin samun akwatin ambato.

Yana iya wuce layuka da dama.



Lamba

A layi fanko, rubuta ``` sannan danna sarari ko Enter don samun akwatin lamba.

Rubuta harshen ma, kamar ```java, sannan danna sarari ko Enter don samun akwatin lamba da aka sa wannan harshe.

import { createNabiWith, defaultWings } from 'nabi-note'

const { nabi } = createNabiWith(defaultWings)
const html = nabi.getHtml()



Ƙarin bayani

Ƙarin bayani yana da taƙaitaccen bayani da jiki.

Za ka iya zaɓar ko a adana shi a naɗe ko a buɗe.



Sandar kayan aiki

An haɗa kayan kanun rubutu, tsara rubutu, daidaitawa, jerin abubuwa, sakawa da takarda bisa rukuni. A kwamfuta kayan suna buɗe; a waya akwai kayan gaggawa da cikakkiyar allon kayan aiki. Saitunan jadawali ko yankin shawagi da aka zaɓa suna bayyana a ƙasa.


Gajerun hanyoyi

Danna Shift sau biyu da sauri don zaɓar kayan aiki da madannai. A kwamfuta ka bi sandar kayan aikin da aka buɗe, a waya kuma cikakkiyar allo. Tab yana sauya rukuni, kibiyoyi suna zaɓar kayan aiki, Enter kuma yana aiwatarwa.

A ƙarshen tubali kamar zance, lamba ko ɓangaren naɗewa, danna Enter sau biyu da sauri don fita. Tazarar dannawa biyu ta asali ita ce 180ms.



Tsara kai tsaye

Misali

Maɓallin aiki

Sakamako

#

Sarari

Kan take

-

Sarari

Jerin alama

1.

Sarari

Jeri mai lamba

[ ] · [x]

Sarari

Jerin dubawa

>

Sarari

Ambato

``` · ```ts

Sarari · Enter

Akwatin lamba

---

Enter

Mai raba

https://…

Sarari · Enter

Mahaɗi



Ayyukan fitarwa

Aiki

Sakamako

getHtml()

HTML

getJson()

JSON



Yana aiki ba tare da DOM ba

Canza NABI TREE zuwa HTML ba ya buƙatar DOM.

Sabar (Node.js) ma na iya karanta NABI TREE da aka adana sannan ta samar da HTML bisa ƙa’idoji iri ɗaya.


Ya dace da waya

  • UI na wayar hannu — Yana shirya kayan gyara bisa faɗin allo.

  • Daidaitawa ga madannin waya — Yana daidaita tsayin wurin gyara idan madanni ya buɗe.

  • Girma mai sassauci — Yana amfani da ma’aunin rem a babban shimfiɗa domin dacewa da ƙara ko rage girman kallo.

  • Harsuna da yawa — Za ka iya saita locale da nau’in rubutu su dace da harshe da alkiblar rubutun.


Gyare-gyare

  • Fikafikinka — idan kana buƙatar wata fasali, za ka iya ƙirƙirarta ka haɗa ta da kanka.

  • CSS naka — za ka iya daidaita manyan launuka, kusurwoyi da tazara da tokens na --nabi-* don yanayin haske da duhu.

  • Buɗaɗɗen tushe — ana wallafa lambar tushe a GitHub kuma ana haɓaka ta tare.


Karanta takardu → nabi.saro.me

HTMLAna loda edita…
JSONnabi-treeAna loda edita…
Sanya
npm install nabi-note
Lambar shirin
import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, makeTranslator,
  defaultWings, mountUpload, mountUploadView, browserFileStore,
  mountFile, mountViewTools, browserHistoryStorage, mountLocalHistory,
  openHistoryPanel,
} from 'nabi-note'
import { mountDiffWing } from 'nabi-note/diff'
import { mountOutline } from 'nabi-note/viewer'

// The box that asks — without it the core answers "no" to everything (plug in your own)
const ask = { message: (t: string) => alert(t), confirm: (t: string) => confirm(t) }

const selected = [
  ...defaultWings,
]
const locale = createLocale('ha')
const { nabi, registry } = createNabiWith(selected, { ask, locale })

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

const view = mountUploadView({ nabi, surface: content, locale })
const upload = mountUpload({
  nabi, root: content, locale,
  // your upload goes here — report progress with task.onProgress(0–100)
  uploader: async (task) => ({ uri: 'https://cdn.example/uploaded' }),
  extensions: ['png', 'jpg', 'pdf'], maxFileSize: 10 * 1024 * 1024,
  onStart: (tasks) => view.start(tasks),
  onProgress: (id, percent) => view.progress(id, percent),
  onSettle: () => view.settle(),
  onDone: () => view.done(),
})
const file = mountFile({ nabi, registry, store: browserFileStore(document), locale, name: () => 'note' })
const history = mountLocalHistory({ nabi, storage: browserHistoryStorage(window) })
const diff = mountDiffWing({ nabi, registry, surface: content, locale })

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale, fileSink: upload.take })

const trigger = document.createElement('button')
trigger.type = 'button'
trigger.textContent = makeTranslator(locale).t('outline')
trigger.style.cssText = 'position:fixed;right:1rem;bottom:1rem;z-index:1000'
root.append(trigger)
const outline = mountOutline(content, {
  trigger, locale,
  scrollContainer: () => root.classList.contains('is-fullscreen') ? root : window,
  onChange: ({ items, activeIndex, available, open }) => {
    trigger.hidden = !available
    trigger.setAttribute("aria-expanded", String(open))
  },
})
trigger.onclick = () => outline.toggle()
// Call outline.unmount() when removing the editor

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
// A tool that needs a panel comes back to the host — without this the button is dead
const toolbar = mountToolbar({
  ...shared, root: document.querySelector('#toolbar')!,
  file,
  onFiles: upload.take,
  onHost: (w) => {
    if (w === 'diff') { diff.open(); return }
    if (w !== 'localHistory') return
    openHistoryPanel({
      history, surface: content, locale, sessionId: history.sessionId,
      render: (record) => createNabiWith(selected, { doc: JSON.parse(record.body) }).nabi.getHtml(),
    })
  },
})
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))

// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')