Tiptapify

Tiptap-3-Rich-Text-Editor für Vue 3 mit Vuetify-3-Symbolleiste

Beta-Status

Dieses Projekt befindet sich derzeit in der Beta-Phase. Es ist funktional vollständig, kann aber noch einige Fehler enthalten.

Funktionen

Vuetify-3-Komponenten

Schöne Material-Design-Symbolleiste, komplett aus Vuetify-3-Komponenten gebaut

30+ Erweiterungen

Rich-Text-Formatierung, eingebettete Medien, Tabellen, Codeblöcke mit Syntaxhervorhebung

Slash-Befehle

Gib / ein, um das Schnelleinfüge-Menü für Überschriften, Listen, Medien und mehr zu öffnen

Internationalisierung

20+ Sprachen über vue-i18n unterstützt

Dunkles Theme

Automatische Unterstützung für Dunkel-/Hellmodus, die sich in dein Vuetify-Theme einfügt

TypeScript

Volle TypeScript-Unterstützung mit exportierten Typen für alle Symbolleisten-Elemente und Props

Schnellstart

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>

Peer-Abhängigkeiten

Tiptapify benötigt Vue 3.x, Vuetify 3.x oder 4.x, vue-i18n 11+ und @mdi/js als Peer-Abhängigkeiten. Die vollständige Einrichtung findest du in der Installationsanleitung.

Lizenz

MIT — GitHub-Repository