Tiptapify

Tiptap 3 rich text редактор за Vue 3 с лента с инструменти на Vuetify 3

Бета статус

Проектът в момента е в бета версия. Функционално е завършен, но може да има още грешки за отстраняване.

Възможности

Компоненти на 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 ​

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