Tiptapify

适用于 Vue 3 的 Tiptap 3 富文本编辑器，工具栏基于 Vuetify 3 实现

Beta 状态

本项目目前处于 Beta 阶段。功能已完整，但仍可能存在一些待修复的缺陷。

特性

Vuetify 3 组件

完全基于 Vuetify 3 组件构建的 Material Design 风格工具栏

30+ 扩展

富文本格式化、媒体嵌入、表格、带语法高亮的代码块

斜杠命令

输入 / 即可唤出快速插入菜单，用于插入标题、列表、媒体等内容

国际化

通过 vue-i18n 支持 20+ 种语言

深色主题

自动支持深色/浅色模式，并与你的 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>

对等依赖

Tiptapify 需要 Vue 3.x、Vuetify 3.x 或 4.x、vue-i18n 11+ 和 @mdi/js 作为对等依赖。完整的配置请参阅安装指南。

许可证

MIT — GitHub 仓库

Tiptapify ​

特性 ​