NABI NOTE
Documentazione
Ali
Carattere di baseAltezza


NABI NOTE

Un editor WYSIWYG open source


NABI NOTE è un editor WYSIWYG open source: formattazione, allineamento, tabelle, caricamento e altre funzioni sono moduli indipendenti chiamati wing. Scegli solo le wing necessarie per assemblare un editor e collega anche quelle create da te. È scritto in JavaScript semplice e può essere usato con framework come React o Vue. Nelle pagine senza build puoi iniziare subito con la libreria CDN. Il suo formato di documento, NABI TREE, può diventare HTML anche in Node.js senza DOM del browser. I documenti di input vengono corretti dalle regole registrate; durante la creazione dell'HTML testo e attributi sono sottoposti a escape e gli indirizzi dei collegamenti sono verificati. Le wing personalizzate e i dati ricevuti dal server vanno comunque valutati secondo la politica di sicurezza dell'applicazione. Le variabili CSS e il layout basato su rem permettono di regolare tema e dimensioni; sono disponibili anche modalità scura e caratteri per più lingue. L’ordinamento delle tabelle, la cronologia locale e il lavoro sui documenti con l’aiuto dell’IA usano lo stesso modello di documento.


Carattere

Le famiglie senza grazie (predefinita), con grazie, monospaziata e corsiva dispongono di font alternativi per le diverse lingue. Se non è disponibile un font adatto alla famiglia scelta, viene usato quello predefinito del browser. La pagina che ospita l’editor ne imposta il carattere predefinito.


Ogni famiglia è mostrata in molte lingue.


산세리프 · ゴシック体 · 无衬线 · 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



Dimensione del testo

Molto piccolo

Piccolo

Grande

Molto grande



Intestazione

Su una riga vuota, digita # e poi uno spazio per trasformarla in un titolo.

H1

H2

H3

H4

H5
H6



Grassetto · Corsivo · Sottolineato · Barrato

Grassetto corsivo sottolineato barrato si possono applicare insieme allo stesso carattere.

Possono anche essere combinati.

Apice e pedice

L'area è 3,5 m2 e una nota si aggiunge così.1

L'acqua è H2O.



Colore del testo · Evidenziatore

La tavolozza rimane leggibile sia in modalità chiara sia in modalità scura.

Colore del testo Verde · Corallo · Viola · Ambra · Blu

Evidenziatore Giallo · Verde · Ciano · Rosa · Viola · Arancione



Collegamento

Inserisci un indirizzo e diventa un collegamento.

Puoi usare URL http:// e https://, oltre ai percorsi dello stesso sito che iniziano con . o /. Indirizzi come javascript: non sono consentiti.

Per esempio, digita https://nabi.saro.me e premi spazio o Invio: viene convertito automaticamente.

Apertura dei collegamenti

Il documento memorizza solo l'indirizzo; la pagina che lo visualizza decide come aprire i collegamenti.

Collegamento a un allegato

I file diversi dalle immagini rimangono come collegamenti ad allegati, come quello qui sotto.

Allegato: il collegamento viene salvato nel documento.



Allineamento

Allineato a sinistra

Allineato al centro

Allineato a destra

Non è possibile applicare l’allineamento ai titoli.



Elenchi

Elenco puntato

Su una riga vuota, digita - e premi spazio: diventa un elenco puntato.

  • Un elemento puntato

    • Tab / Maiusc+Tab aumentano o riducono il rientro.

Elenco numerato

Su una riga vuota, digita 1. e premi spazio per creare un elenco numerato.

  1. Primo

  2. Secondo

  3. Terzo

Elenco attività

Su una riga vuota, digita [ ] o [x] e premi spazio per creare un elenco attività.

  • Questo elemento è selezionato.

  • Questo non è ancora selezionato.



Tabella

Le celle possono contenere più paragrafi e blocchi, con colori di sfondo per distinguere i contenuti. Prova a modificare direttamente testo e immagini nella tabella seguente.

Risorse

Note di lavoro

Un’immagine e la sua descrizione nella stessa cella.

Paragrafi flessibili

Premi Invio per iniziare un paragrafo o Maiusc+Invio per andare a capo nello stesso paragrafo.

  • Cambiare lo sfondo delle celle

  • Rientrare un elenco con Tab

  • Selezionare più celle e applicare lo stesso colore

Fai clic per i suggerimenti di modifica

Le celle possono contenere anche blocchi richiudibili, citazioni, codice e video.

Unendo le celle, i loro contenuti restano nell’ordine originale.

Fai clic in una cella per vedere il colore di sfondo e gli strumenti per righe e colonne. Seleziona più celle per cambiarne insieme colore e allineamento. Per posizionare l’intera tabella, scegli “Seleziona tabella” e usa gli strumenti di allineamento.

Le tabelle con colori o più blocchi vengono conservate come HTML anche quando si salva in Markdown.

Colori di sfondo delle celle

Qui sono raccolti tutti gli sfondi supportati. Fai clic su una cella per cambiarne il colore oppure scegli “Predefinito” nelle proprietà per rimuovere lo sfondo.

Giallo

yellow

Verde

green

Ciano

cyan

Rosa

pink

Viola

purple

Arancione

orange

Ordinamento delle colonne

Anteprima: fai clic, quindi seleziona nell’ordine le intestazioni Disponibilità e Prezzo.

Modello

Disponibilità

Prezzo

Peso

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

Da definire

12,999

2.4 kg

Prezzo contiene solo valori numerici, quindi la colonna viene ordinata numericamente.

Disponibilità contiene numeri e testo, quindi la colonna viene ordinata come stringhe.



Separatore

Digita --- e premi Invio per trasformarlo in un separatore.



Immagine

La larghezza va dal 30% al 100% e l'immagine può essere allineata a sinistra, al centro o a destra.



Area flottante

A colpo d’occhio

Una piccola area di supporto per testo, immagini e tabelle.

Posizione

Destra

Larghezza massima

40%

Usa un’area flottante per collocare spiegazioni o piccoli materiali accanto al testo principale. In un documento largo, questo testo scorre a fianco dell’area. Fai clic al suo interno per modificare il testo e inserire immagini o tabelle nello stesso editor.

Posiziona il cursore nell’area per aprirne le proprietà. Passa da sinistra a destra e scegli una larghezza massima del 20, 30, 40 o 50% adatta al testo. Anche le tabelle e le immagini incollate restano al suo interno.

Puoi anche racchiudere i paragrafi selezionati in un’area. Il pulsante di rimozione accanto alla larghezza lascia il contenuto nel documento. L’anteprima nasconde il contorno tratteggiato di modifica; nei documenti stretti o in stampa tutto prosegue in una colonna.


YouTube



Caricamento

Prova a trascinare un'immagine o un file nell'editor.

Questa demo non invia file a un server reale. Collega un gestore di caricamento nella tua applicazione per salvarli su un server.

Dopo aver aperto il selettore di immagini o avviato un caricamento, spostare solo il cursore mantiene l’inserimento nella posizione originale. Modificare il documento durante l’attesa annulla l’inserimento e mostra un avviso. Avanzamento e risultato di un caricamento avviato in una cella restano nella stessa cella.



Citazione

Su una riga vuota, digita > e premi spazio per creare un riquadro di citazione.

Può occupare più righe.



Codice

Su una riga vuota, digita ``` e premi spazio o Invio per creare un blocco di codice.

Scrivi anche il linguaggio, ad esempio ```java, poi premi spazio o Invio per creare un blocco di codice con quel linguaggio.

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

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



Dettagli

I dettagli sono composti da un riepilogo e da un corpo.

Puoi scegliere se salvarli chiusi o aperti.



Barra degli strumenti

Gli strumenti per titoli, formattazione, allineamento, elenchi, inserimento e documento sono raggruppati. Sul computer sono espansi; sul mobile sono disponibili strumenti rapidi e la palette completa. Le proprietà della tabella o dell’area flottante selezionata appaiono sotto la barra.


Scorciatoie

Premi Maiusc due volte rapidamente per scegliere gli strumenti con la tastiera. Sul computer esplora la barra espansa, sul mobile la palette completa. Usa Tab per cambiare gruppo, le frecce per scegliere uno strumento e Invio per eseguirlo.

Alla fine di un blocco di citazione, codice o richiudibile, premi Invio due volte rapidamente per uscire. L’intervallo predefinito è di 180ms.



Formattazione automatica

Esempio

Tasto di azione

Risultato

#

Spazio

Intestazione

-

Spazio

Elenco puntato

1.

Spazio

Elenco numerato

[ ] · [x]

Spazio

Elenco attività

>

Spazio

Citazione

``` · ```ts

Spazio · Invio

Blocco di codice

---

Invio

Separatore

https://…

Spazio · Invio

Collegamento



Funzioni di output

Funzione

Risultato

getHtml()

HTML

getJson()

JSON



Funziona senza DOM

La conversione da NABI TREE a HTML non richiede un DOM.

Anche un server (Node.js) può leggere il NABI TREE salvato e generare HTML con le stesse regole.


Adatto ai dispositivi mobili

  • UI mobile — Dispone gli strumenti di modifica in base alla larghezza dello schermo.

  • Adattamento alla tastiera mobile — Regola l’altezza dell’area di modifica quando si apre la tastiera.

  • Dimensioni flessibili — Usa unità rem nel layout principale per adattarsi all’aumento e alla riduzione dello zoom.

  • Più lingue — Puoi impostare la locale e il carattere in base alla lingua e alla direzione del testo.


Personalizzazione

  • La tua wing — se ti serve una funzione, puoi crearla e collegarla tu stesso.

  • Il tuo CSS — regola i colori principali, gli angoli e gli spazi con i token --nabi-* per le modalità chiara e scura.

  • Open source — il codice sorgente è pubblicato su GitHub e sviluppato in collaborazione.

Leggi la documentazione → nabi.saro.me

HTMLCaricamento dell’editor…
JSONnabi-treeCaricamento dell’editor…
Installazione
npm install nabi-note
Codice
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('it')
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')