Tiptap Editor Vue

A highly customizable, production-ready Vue 3 rich text editor built on top of Tiptap.

🔗 Live Demo

Craft with Precision - 在线预览体验

✨ 功能特性

• 📦 开箱即用: 提供开箱即用的 UI 和交互，无需复杂的 Tiptap 扩展配置。
• 🔄 v-model 双向绑定: 完美适配 Vue 3，原生支持 HTML 格式数据的双向绑定。
• 🛠️ 强大的工具栏: 内置加粗、标题、列表、代码块、链接、图片、表格、对齐、颜色、高亮、撤销重做等基础与高级功能。
• 🖼️ 优雅的图片处理: 支持按钮上传、粘贴上传、拖拽上传，并带有上传中占位与失败回显状态。
• 💬 气泡菜单 (Bubble Menu): 选中内容时自动弹出快捷操作，支持链接预览/编辑/删除，以及表格行列快速操作。
• 📊 字数统计: 支持实时字数统计和 maxLength 拦截限制。
• 🎨 代码高亮: 基于 Lowlight 提供完美的代码块语法高亮体验。
• 🧹 内容净化: 基础的 Word 粘贴脏标签清理。

📦 安装

推荐使用 pnpm 或 npm 安装：

pnpm add tiptap-editor-vue
# 或者
npm install tiptap-editor-vue

🚀 快速开始

在你的 Vue 3 项目中，只需按如下方式引入组件和样式：

<script setup lang="ts">
import { ref } from 'vue'
// 1. 引入组件
import { RichEditor } from 'tiptap-editor-vue'
// 2. 引入基础样式
import 'tiptap-editor-vue/style.css'

const content = ref('<p>Hello <strong>Tiptap</strong> 👋</p>')

// 3. 定义你自己的图片上传逻辑
async function handleUploadImage(file: File): Promise<string> {
  // 这里写你的请求接口逻辑，比如 FormData 上传，最终返回图片的 URL
  return URL.createObjectURL(file) 
}
</script>

<template>
  <RichEditor
    v-model="content"
    placeholder="输入 '/' 唤起菜单，开始书写你的故事..."
    :min-height="280"
    :max-height="640"
    :max-length="5000"
    :upload-image="handleUploadImage"
    :bubble-menu="true"
    show-word-count
  />
</template>

⚙️ 对外 API (Props)

| 参数 | 类型 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | | modelValue | string | '' | 绑定的 HTML 内容 | | placeholder | string | '' | 编辑器为空时的占位符 | | minHeight | number | 240 | 编辑器最小高度 (px) | | maxHeight | number | undefined | 编辑器最大高度 (px)，超出滚动 | | maxLength | number | undefined | 最大字数限制 | | showWordCount| boolean| false | 是否显示底部字数统计栏 | | uploadImage | (file: File) => Promise<string> | - | 图片上传函数，必须返回图片 URL | | readonly | boolean | false | 是否为只读模式（隐藏工具栏，不可编辑） | | disabled | boolean | false | 是否为禁用模式（带置灰样式） | | toolbar | string[] | [...] | 工具栏显示的按钮及其顺序 | | bubbleMenu | boolean | false | 是否开启选中文字时的悬浮气泡菜单 |

🛠️ Expose 方法

你可以通过 ref 获取组件实例，调用以下方法：

• getHTML(): 获取当前 HTML 格式内容
• getText(): 获取当前纯文本内容
• getJSON(): 获取当前 Tiptap JSON 格式内容
• focus(): 使编辑器获得焦点
• clear(): 清空编辑器内容
• getEditor(): 获取底层的 Tiptap editor 实例，以便调用原生 API

🤝 贡献与扩展

工具栏完全采用注册表驱动 (src/components/toolbar/toolbar-registry.ts)。 如果你需要克隆源码进行二次开发，你可以极度方便地插入自定义按钮。

git clone https://github.com/wllcyg/tiptap-g.git
cd tiptap-g
pnpm install
pnpm dev