Tiptapify

Rich text редактор Tiptap 3 для Vue 3 з панеллю інструментів на Vuetify 3

Статус Beta

Проєкт зараз перебуває у статусі Beta. Він функціонально завершений, але в ньому ще можуть бути помилки.

Можливості

Компоненти Vuetify 3

Гарна панель інструментів у стилі Material Design, повністю побудована на компонентах Vuetify 3

30+ розширень

Форматування тексту, вбудовування медіа, таблиці, блоки коду з підсвічуванням синтаксису

Slash-команди

Введіть /, щоб відкрити меню швидкої вставки заголовків, списків, медіа та іншого

Інтернаціоналізація

Понад 20 мов через vue-i18n

Темна тема

Автоматична підтримка темного й світлого режимів, інтегрована з темою Vuetify

TypeScript

Повна підтримка 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>

Peer-залежності

Для роботи Tiptapify потрібні Vue 3.x, Vuetify 3.x або 4.x, vue-i18n 11+ та @mdi/js як peer-залежності. Повне налаштування дивіться в посібнику зі встановлення.

Ліцензія

MIT — GitHub-репозиторій

Tiptapify ​

Можливості ​