Kohandatud tööriistariba

Kindlate üksuste kuvamine

Kasuta propi items, et kuvada ainult vajalikud tööriistariba nupud. Anna ette üksuste nimede massiiv:

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

Kasuta nuppude rühmade vahel eraldajana märki |.

Loendistiilide rippmenüü

Järelliide :styles vahetab loendinupu selle märgi-/nummerdusstiilide rippmenüü vastu: loendinupp avab list-style-type valikute ruudustiku, mis salvestatakse reasisese stiilina. Ruudustik renderdatakse naha menüüpinna sees, nii et see järgib aktiivset nahka (nahkade juhend):

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

Üksuste välistamine

Kasuta items-exclude koos itemsiga, et näidata enamikku tööriistariba üksustest, kuid välistada kindlad:

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

Kohandatud sektsioonid

Rühmita üksused oma nimega sektsioonideks objekti abil:

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

Tööriistariba sektsioonide viide

Tööriistariba üksused on korraldatud sektsioonidesse. Siin on kõik saadaolevad sektsioonid:

Sektsioon	Üksused
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

Tööriistariba peitmine

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

Kohandatud tööriistariba komponendid

Lisa oma nupud propiga customExtensions. Iga kirje on tööriistariba sektsioon — kasuta sisseehitatud sektsiooni nime (misc, media, …), et liita oma nupud olemasolevasse rühma, või uut nime eraldi rühma jaoks, mis renderdatakse pärast sisseehitatud sektsioone:

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

Kohandatud komponendid renderdatakse komponendi <Tiptapify> sees, nii et neil on ligipääs samadele jagatud väärtustele, mida kasutavad sisseehitatud nupud — redaktor, tõlked ja redaktoritaseme konfiguratsioon:

<!-- 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() tagastab redaktoritaseme konfiguratsiooni (variantBtn, variantField), nii et kohandatud komponendid sobituvad automaatselt sisseehitatud tööriistariba stiiliga.
• Prop variantBtn antakse tagasiühilduvuse huvides endiselt igale tööriistariba komponendile — enne jagatud konfiguratsiooni kirjutatud komponendid töötavad muutumatult edasi.
• inject('tiptapifyI18n') annab sama tõlkefunktsiooni, mida kasutavad sisseehitatud nupud.