Barra degli strumenti fissa Spazio per tastiera mobileCarattere 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.

Carattere

Senza grazie (predefinito), con grazie, monospaziato e corsivo: ogni famiglia dispone i font per sistema di scrittura. L'host decide il carattere predefinito.

Ogni famiglia è mostrata in molte lingue.

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

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

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

Corsivo · 필기체 · 筆記体 · 手写体 · Schreibschrift · 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~~ — un esempio.

~~Possono anche essere combinati.~~

Apice e pedice

L'area è 3,5 m² e una nota si aggiunge così.¹

L'acqua è H₂O.

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

Il caricamento di un file diverso da un'immagine lascia un collegamento con l'aspetto di un file.

Allegato rimane così.

Allineamento

Allineato a sinistra

Allineato al centro

Allineato a destra

Anche i titoli possono essere allineati.

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.

Primo
Secondo
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

Fai clic sul pulsante della tabella nella barra degli strumenti, poi aggiungi, elimina e unisci righe e colonne.

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 numeri, quindi viene ordinato numericamente.

Disponibilità viene ordinata come testo perché l'ultima cella contiene lettere.

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.

YouTube

Caricamento

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

Il caricamento usato qui è simulato; un'impostazione lo collega al tuo server.

Se il caricamento non riesce, l'immagine o il file viene rimosso dall'editor.

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.

Scorciatoie

Premi rapidamente Maiusc due volte per mostrare nella barra degli strumenti la scorciatoia di ogni funzione.

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 JSON a HTML non richiede un DOM.

Un server (Node.js) può leggere un NABI TREE salvato e creare HTML con le stesse regole.

Adatto ai dispositivi mobili

Interfaccia mobile — un layout reattivo gestisce l'interfaccia mobile.
Spazio della tastiera mobile — quando la tastiera si apre, la sua altezza viene considerata.
Dimensionamento fluido — ogni dimensione è espressa in rem.
Molte lingue — supporta più lingue.

Personalizzazione

La tua wing — se ti serve una funzione, creala e registrala.
Il tuo CSS — colori, angoli e spaziatura sono tutti definiti come --nabi-*, quindi puoi impostare modalità scura, chiara e altro.
Open source — è open source su GitHub.

Leggi la documentazione → nabi.saro.me

HTMLCaricamento dell’editor…

JSONnabi-treeCaricamento dell’editor…

Installazione

npm install nabi-note

Codice

import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, defaultWings, mountUpload, mountUploadView,
  browserFileStore, mountFile, parseNodes, mountViewTools,
  browserHistoryStorage, mountLocalHistory, openHistoryPanel,
} from 'nabi-note'
import { mountDiffWing } from 'nabi-note/diff'

// 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 { nabi, registry } = createNabiWith(selected, { ask })

// 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 })
const upload = mountUpload({
  nabi, root: content,
  // 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), parse: parseNodes, locale: 'it', name: () => 'note' })
const history = mountLocalHistory({ nabi, storage: browserHistoryStorage(window) })
const diff = mountDiffWing({ nabi, registry, surface: content, locale: 'it' })

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

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'it' }
// 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: 'it', 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()))