Ausrichtung ​

Richte den aktuellen Absatz oder die Absätze im ausgewählten Bereich links, zentriert oder rechts aus. Objekte, die in einem Absatz enthalten sind, wie Bilder, Videos und Tabellen, werden über den sie umgebenden Absatz ausgerichtet.

Die Ausrichtung wird als Absatzattribut gespeichert, nicht als Textformatierung. Codeblöcke sind von der Ausrichtung ausgeschlossen, da die Einrückung dort eine Bedeutung hat.

In einer Tabellenzelle wird der Absatz oder das Bild an der Cursorposition ausgerichtet. Werden mehrere Zellen durch Ziehen ausgewählt, gilt die Ausrichtung für alle ausrichtbaren Absätze und Bilder darin. Enthält die Auswahl unterschiedliche Ausrichtungen, wird keine Ausrichtungsschaltfläche als ausgewählt angezeigt.

Um die Tabelle selbst auszurichten, wählen Sie Tabelle auswählen in ihren Kontextwerkzeugen oder setzen den Cursor vor oder hinter die Tabelle in ihrem umschließenden Absatz. Verwenden Sie dann die Ausrichtungsschaltflächen der Hauptwerkzeugleiste. Die linke oder rechte Position eines Float-Bereichs ändern Sie in dessen Kontextwerkzeugen statt über die Ausrichtungsschaltflächen.

Flügel
StandardschriftartAbstand
HTMLEditor wird geladen…
JSONnabi-treeEditor wird geladen…
Installation
npm install nabi-note
Code
import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, alignWing, dropCapWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  alignWing,
  dropCapWing,
]
const locale = createLocale('de')
const { nabi, registry } = createNabiWith(selected, { locale })

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

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

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
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')
ts
const selected = wings().use('align').build()

Für einen Befehl auf die aktuelle Auswahl verwenden Sie l für links, c für zentriert und r für rechts.

ts
nabi.applyCommand('setAlign', { value: 'c' })