Barra de ferramentas personalizada

Exibindo itens específicos

Use a prop items para exibir apenas os botões da barra de ferramentas de que você precisa. Passe um array com os nomes dos itens:

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

Use | como separador entre grupos de botões.

Lista suspensa de estilos de lista

O sufixo :styles troca um botão de lista pela lista suspensa de estilos de marcador/numeração: o botão de lista abre uma grade de opções de list-style-type, salvas como estilo inline. A grade é renderizada dentro da superfície de menu da skin, portanto segue a skin ativa (guia de Skins):

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

Excluindo itens

Use items-exclude junto com items para mostrar quase todos os itens da barra de ferramentas, excluindo apenas alguns específicos:

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

Seções personalizadas

Agrupe os itens em suas próprias seções nomeadas usando um objeto:

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

Referência das seções da barra de ferramentas

Os itens da barra de ferramentas são organizados em seções. Estas são todas as seções disponíveis:

Seção	Itens
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

Ocultando a barra de ferramentas

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

Componentes personalizados da barra de ferramentas

Adicione seus próprios botões com a prop customExtensions. Cada entrada é uma seção da barra de ferramentas — use o nome de uma seção nativa (misc, media, …) para mesclar seus botões em um grupo existente, ou um novo nome para um grupo separado, renderizado após as seções nativas:

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

Os componentes personalizados são renderizados dentro de <Tiptapify>, então têm acesso aos mesmos valores compartilhados que os botões nativos usam — editor, traduções e a configuração em nível de editor:

<!-- 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() retorna a configuração em nível de editor (variantBtn, variantField), de modo que os componentes personalizados acompanham automaticamente o estilo da barra de ferramentas nativa.
• A prop variantBtn ainda é passada a todos os componentes da barra de ferramentas por retrocompatibilidade — componentes escritos antes da configuração compartilhada continuam funcionando sem alterações.
• inject('tiptapifyI18n') fornece a mesma função de tradução que os botões nativos usam.