Custom Toolbar

Bestimmte Elemente anzeigen

Mit der Prop items zeigst du nur die Symbolleisten-Schaltflächen an, die du brauchst. Übergib ein Array mit Elementnamen:

<template>
  <Tiptapify
    :items="['bold', 'italic', 'underline', '|', 'heading', 'bulletList', 'orderedList', '|', 'link', 'image', '|', 'undo', 'redo']"
    placeholder="Custom toolbar..."
  />
</template>

Verwende | als Trennzeichen zwischen Schaltflächengruppen.

Dropdown für Listenstile

Das Suffix :styles ersetzt eine Listen-Schaltfläche durch ihr Dropdown mit Aufzählungszeichen-/Nummerierungsstilen: Die Listen-Schaltfläche öffnet ein Raster mit list-style-type-Optionen, gespeichert als Inline-Stil. Das Raster wird innerhalb der Menüfläche des Skins gerendert und folgt daher dem aktiven Skin (Skins-Anleitung):

<template>
  <Tiptapify
    :items="['bold', 'italic', '|', 'bulletList:styles', 'orderedList:styles', '|', 'undo', 'redo']"
    placeholder="Open the list styles dropdowns..."
  />
</template>

Elemente ausschließen

Verwende items-exclude zusammen mit items, um die meisten Symbolleisten-Elemente anzuzeigen, bestimmte aber auszuschließen:

<template>
  <Tiptapify
    :items="['bold', 'italic', 'underline', 'strike']"
    :items-exclude="true"
    placeholder="Excluding unwanted items..."
  />
</template>

Eigene Bereiche

Gruppiere Elemente mithilfe eines Objekts in eigene benannte Bereiche:

<script setup lang="ts">
const customItems = {
  formatting: ['bold', 'italic', 'underline', 'strike'],
  headings: ['heading'],
  lists: ['bulletList', 'orderedList', 'taskList'],
  media: ['link', 'image', 'video'],
}
</script>

<template>
  <Tiptapify
    :items="customItems"
    placeholder="Custom sections toolbar..."
  />
</template>

Referenz der Symbolleisten-Bereiche

Symbolleisten-Elemente sind in Bereiche gegliedert. Hier sind alle verfügbaren Bereiche:

Section	Items
actions	undo, redo
format	bold, italic, underline, strike
formatExtra	sup, sub, code, codeBlock, blockquote
style	heading, fontFamily, fontSize, lineHeight, textColor, highlightColor
alignment	left, center, right, justify
list	bulletList, orderedList, taskList, indent, outdent
media	link, image, video, iframe, emoji, charmap, table
misc	line, pagebreak, source, preview, fullscreen, formatClear, invisibleChar

Symbolleiste ausblenden

<template>
  <Tiptapify
    :toolbar="false"
    placeholder="No toolbar — use the bubble menu instead..."
  />
</template>

Eigene Symbolleisten-Komponenten

Füge mit der Prop customExtensions eigene Schaltflächen hinzu. Jeder Eintrag ist ein Symbolleisten-Bereich — verwende einen eingebauten Bereichsnamen (misc, media, …), um deine Schaltflächen in eine bestehende Gruppe einzufügen, oder einen neuen Namen für eine separate Gruppe, die nach den eingebauten Bereichen gerendert wird:

<script setup lang="ts">
import BlockquoteButton from './BlockquoteButton.vue'

const customExtensions = [{
  section: 'custom',
  group: true,
  components: [{ name: 'blockquoteBtn', component: BlockquoteButton }],
}]
</script>

<template>
  <Tiptapify :custom-extensions="customExtensions" />
</template>

Eigene Komponenten werden innerhalb von <Tiptapify> gerendert und haben daher Zugriff auf dieselben geteilten Werte wie die eingebauten Schaltflächen — Editor, Übersetzungen und die Konfiguration auf Editor-Ebene:

<!-- BlockquoteButton.vue -->
<script setup lang="ts">
import { inject, type Ref } from 'vue'
import { TipTapEditor, useTiptapifyConfig } from 'tiptapify'

const editor = inject('tiptapifyEditor') as Ref<TipTapEditor>
const { variantBtn } = useTiptapifyConfig()
</script>

<template>
  <VBtn
    :color="editor.isActive('blockquote') ? 'primary' : ''"
    :variant="variantBtn"
    size="32"
    @click="editor.commands.toggleBlockquote()"
  >
    Quote
  </VBtn>
</template>

• useTiptapifyConfig() gibt die Konfiguration auf Editor-Ebene zurück (variantBtn, variantField), sodass eigene Komponenten automatisch zum Stil der eingebauten Symbolleiste passen.
• Die Prop variantBtn wird aus Gründen der Abwärtskompatibilität weiterhin an jede Symbolleisten-Komponente übergeben — Komponenten, die vor der geteilten Konfiguration geschrieben wurden, funktionieren unverändert weiter.
• inject('tiptapifyI18n') liefert dieselbe Übersetzungsfunktion, die auch die eingebauten Schaltflächen verwenden.