Tiptapify

Editor de rich text do Tiptap 3 para Vue 3, com uma barra de ferramentas implementada em Vuetify 3

Status Beta

Este projeto está atualmente em Beta. Ele está completo em recursos, mas ainda pode ter alguns bugs a corrigir.

Recursos

Componentes Vuetify 3

Uma bela barra de ferramentas em Material Design, construída inteiramente com componentes Vuetify 3

Mais de 30 extensões

Formatação de rich text, incorporação de mídia, tabelas, blocos de código com destaque de sintaxe

Slash commands

Digite / para abrir o menu de inserção rápida de títulos, listas, mídia e mais

Internacionalização

Mais de 20 idiomas suportados via vue-i18n

Tema escuro

Suporte automático aos modos escuro/claro, integrado ao seu tema do Vuetify

TypeScript

Suporte completo a TypeScript, com tipos exportados para todos os itens da barra de ferramentas e props

Início rápido

bash

npm i tiptapify
# or
pnpm i tiptapify

vue

<script setup lang="ts">
const handleEditorReady = (options) => {
  console.log('HTML:', options.getHTML())
  console.log('JSON:', options.getJSON())
}
</script>

<template>
  <Tiptapify
    placeholder="Start writing..."
    @editor-ready="handleEditorReady"
  />
</template>

Dependências peer

O Tiptapify requer Vue 3.x, Vuetify 3.x ou 4.x, vue-i18n 11+ e @mdi/js como dependências peer. Veja o guia de Instalação para a configuração completa.

Licença

MIT — Repositório no GitHub