Własny pasek narzędzi

Wyświetlanie wybranych elementów

Użyj właściwości items, aby wyświetlić tylko potrzebne przyciski paska narzędzi. Przekaż tablicę nazw elementów:

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

Użyj | jako separatora między grupami przycisków.

Lista rozwijana stylów list

Przyrostek :styles zamienia przycisk listy na listę rozwijaną stylów znaczników i numeracji: przycisk listy otwiera siatkę opcji list-style-type, zapisywanych jako styl w wierszu. Siatka jest renderowana na powierzchni menu skórki, więc podąża za aktywną skórką (przewodnik po skórkach):

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

Wykluczanie elementów

Użyj items-exclude razem z items, aby pokazać większość elementów paska narzędzi, wykluczając wybrane:

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

Własne sekcje

Pogrupuj elementy we własne nazwane sekcje za pomocą obiektu:

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

Opis sekcji paska narzędzi

Elementy paska narzędzi są podzielone na sekcje. Oto wszystkie dostępne sekcje:

Sekcja	Elementy
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

Ukrywanie paska narzędzi

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

Własne komponenty paska narzędzi

Dodaj własne przyciski za pomocą właściwości customExtensions. Każdy wpis to sekcja paska narzędzi — użyj nazwy wbudowanej sekcji (misc, media, …), aby włączyć swoje przyciski do istniejącej grupy, albo nowej nazwy dla osobnej grupy renderowanej po sekcjach wbudowanych:

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

Własne komponenty są renderowane wewnątrz <Tiptapify>, więc mają dostęp do tych samych wspólnych wartości, których używają wbudowane przyciski — edytora, tłumaczeń i konfiguracji na poziomie edytora:

<!-- 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() zwraca konfigurację na poziomie edytora (variantBtn, variantField), dzięki czemu własne komponenty automatycznie pasują stylem do wbudowanego paska narzędzi.
• Właściwość variantBtn jest nadal przekazywana do każdego komponentu paska narzędzi ze względu na wsteczną zgodność — komponenty napisane przed wprowadzeniem wspólnej konfiguracji działają bez zmian.
• inject('tiptapifyI18n') daje tę samą funkcję tłumaczeń, której używają wbudowane przyciski.