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 с экспортируемыми типами для всех элементов панели инструментов и props

Быстрый старт

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 требует в качестве peer-зависимостей Vue 3.x, Vuetify 3.x или 4.x, vue-i18n 11+ и @mdi/js. Полную настройку см. в руководстве по установке.

Лицензия

MIT — репозиторий на GitHub

Tiptapify ​

Возможности ​