vh-vue-tiptap-editor

一个基于 Tiptap 构建的高性能、可扩展的 Vue 3 富文本编辑器组件库。内置了常用的编辑功能和 Remix Icon 图标，支持开箱即用的主题样式。

特性

• 🚀 Vue 3 支持：完全基于 Vue 3 组合式 API 开发。
• 🛠️ 高度可配置：支持自定义工具栏按钮及其顺序。
• 📦 原子化设计：每个功能按钮都是独立的组件，易于扩展。
• ✨ 内置图标：集成 Remix Icon，图标风格统一且支持按需引入。
• 📝 v-model 支持：完美支持双向绑定 HTML 内容。
• 🎨 样式隔离：使用 Scoped CSS，不污染全局样式。
• 🧩 Headless 架构：逻辑与 UI 完全解耦，支持极致的组件级定制。

安装

# 使用 pnpm
pnpm add vh-vue-tiptap-editor

# 使用 npm
npm install vh-vue-tiptap-editor

快速上手

1. 全局注册

在你的 main.ts 中引入并安装插件：

import { createApp } from 'vue'
import TiptapProEditor from 'vh-vue-tiptap-editor'
import 'vh-vue-tiptap-editor/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(TiptapProEditor)
app.mount('#app')

2. 在组件中使用

<template>
  <TiptapEditor v-model="content" />
</template>

<script setup>
import { ref } from 'vue'

const content = ref('<p>Hello World! 🌍</p>')
</script>

API 参考

TiptapEditor 属性 (Props)

| 属性名 | 类型 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | | v-model | string | '' | 编辑器的 HTML 内容 | | editable | boolean | true | 是否可编辑 | | autoFocus | boolean | false | 初始化时是否自动聚焦 | | tools | ToolbarItemType[] | DEFAULT_TOOLS | 自定义工具栏按钮列表 | | extensions | any[] | [] | 额外的 Tiptap 扩展 |

工具栏配置

你可以通过 tools 属性来自定义工具栏展示的按钮及其顺序。

可用按钮列表： undo, redo, divider, bold, italic, strike, h1, h2, h3, h4, h5, h6, bulletList, orderedList, blockquote, codeBlock, horizontalRule

示例：

<TiptapEditor 
  v-model="content" 
  :tools="['undo', 'redo', 'divider', 'bold', 'italic']" 
/>

高级定制

由于采用了 Headless 设计模式，所有的编辑器按钮都支持高度定制。

组件级定制

你可以直接引入具体的按钮组件并覆盖其属性或内容：

<template>
  <TiptapEditor v-model="content">
    <template #toolbar>
      <div class="custom-toolbar">
        <!-- 使用自定义图标和文字 -->
        <BoldButton label="加粗" :icon="MyBoldIcon" />
        
        <!-- 使用插槽完全自定义内部结构 -->
        <CodeBlockButton>
          <template #icon><i class="custom-code-icon" /></template>
          代码块
          <Badge>Mod+Alt+C</Badge>
        </CodeBlockButton>
      </div>
    </template>
  </TiptapEditor>
</template>

<script setup>
import { BoldButton, CodeBlockButton, Badge } from 'vh-vue-tiptap-editor'
</script>

逻辑复用

通过 useEditorItem Composable，你可以在任何地方复用编辑器逻辑：

import { useEditorItem } from 'vh-vue-tiptap-editor'

// 获取加粗功能的响应式状态和操作方法
const { isActive, canToggle, handleToggle, label, Icon } = useEditorItem('bold', editor)

开发与贡献

该项目采用 pnpm monorepo 架构。

• packages/ui: 编辑器核心代码。
• play: 开发环境演示应用。

本地运行

# 安装依赖
pnpm install

# 启动开发环境
pnpm dev

开源协议

ISC