Tiptapify

Vuetify 3 ツールバーを備えた、Vue 3 向け Tiptap 3 リッチテキストエディター

ベータ版について

このプロジェクトは現在ベータ版です。機能は一通り揃っていますが、まだ不具合が残っている可能性があります。

特長

Vuetify 3 コンポーネント

Vuetify 3 コンポーネントだけで構築した、美しいマテリアルデザインのツールバー

30 以上の拡張機能

リッチテキストの書式設定、メディアの埋め込み、表、シンタックスハイライト付きコードブロック

スラッシュコマンド

/ を入力すると、見出し、リスト、メディアなどをすばやく挿入できるメニューが開きます

国際化

vue-i18n により 20 以上の言語に対応

ダークテーマ

Vuetify のテーマと連動して、ダーク/ライトモードに自動で対応

TypeScript

すべてのツールバー項目と props の型をエクスポートし、TypeScript を完全にサポート

クイックスタート

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>

ピア依存関係

Tiptapify を使うには、ピア依存関係として Vue 3.x、Vuetify 3.x または 4.x、vue-i18n 11 以上、@mdi/js が必要です。セットアップの詳細はインストールガイドをご覧ください。

ライセンス

MIT — GitHub リポジトリ

Tiptapify ​

特長 ​