tiptap-vue-pro-element-plus

Tiptap Vue Pro Element Plus

English: README.en-US.md

基于 Tiptap v3 + Vue 3 + Element Plus 的开箱即用富文本编辑器组件。

能力

• 开箱即用工具栏:标题、格式化、字体、字号、行高、缩进、颜色、高亮、对齐
• 链接、图片上传/网络图片、视频/音频/文件上传、表格网格、列宽拖动、行列抓手、区域选择、Mermaid、Markdown 导入导出
• 代码块支持 17 种默认语言语法高亮、语言图标、上下文切换语言和一键复制
• Slash Command 快捷插入:输入 / 可搜索并插入标题、待办、列表、表格、图片、分割线、代码块和 Mermaid 图表
• Ctrl/⌘ + F 查找替换:匹配高亮、上/下一个、大小写敏感、替换当前和替换全部
• 全屏、预览、暗色模式、字数统计

字体、字号、行高、缩进、表格列宽、Slash Command 和查找替换交互属于编辑器体验能力;导出 Markdown 时不会保留这些 UI 行为。

安装

pnpm add tiptap-vue-pro-element-plus element-plus
pnpm add @tiptap/core @tiptap/pm @tiptap/vue-3

用法

<script setup lang="ts">
import { ref } from 'vue'
import { ProEditorElementPlus } from 'tiptap-vue-pro-element-plus'
import 'tiptap-vue-pro-element-plus/style.css'
import 'element-plus/dist/index.css'

const content = ref('<p>hello world</p>')
</script>

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

配置

locale 控制内置文案语言(支持 zh-CN / en-US 和局部覆盖);toolbar 控制内置按钮的显示和顺序;toolbarOptions 控制菜单数据,如字体、字号、行高、颜色、代码语言、分割线样式、表格网格、Markdown 和打印;editorBehaviorOptions 控制默认行为,如链接打开方式、表格是否带表头、图片和媒体附件的 accept、大小上限、多选和渲染方式。

<script setup lang="ts">
import { ref } from 'vue'
import {
  ProEditorElementPlus,
  type EditorBehaviorOptions,
  type ToolbarOptions,
  type UploadAsset,
} from 'tiptap-vue-pro-element-plus'

const content = ref('<p>hello world</p>')

const toolbarOptions: ToolbarOptions = {
  fontFamilies: [
    { label: '默认字体', value: '' },
    { label: '苹方', value: 'PingFang SC' },
  ],
  fontSizes: ['', '14px', '16px', '20px', '28px'],
  lineHeights: ['', '1.5', '1.75', '2'],
  codeBlockLanguages: [
    { label: 'TypeScript', value: 'typescript' },
    { label: 'Python', value: 'python' },
  ],
  horizontalRules: [
    { label: '实线', value: 'solid' },
    { label: '虚线', value: 'dashed' },
  ],
  tableGrid: { maxRows: 12, maxCols: 12 },
}

const editorBehaviorOptions: EditorBehaviorOptions = {
  link: { defaultTarget: '_self' },
  table: { withHeaderRow: false },
  image: { accept: 'image/png,image/jpeg,image/webp', maxSize: 10 * 1024 * 1024, multiple: true, allowUrl: true },
  media: {
    video: { accept: 'video/mp4,video/webm', maxSize: 100 * 1024 * 1024, multiple: true },
    audio: { accept: 'audio/mpeg,audio/wav', maxSize: 30 * 1024 * 1024, multiple: true },
    file: {
      accept: '.pdf,.doc,.docx,.xls,.xlsx,.zip',
      maxSize: 50 * 1024 * 1024,
      multiple: true,
      render: { showSize: true, showMimeType: true, showUploadedAt: true },
    },
  },
}

const uploadAsset: UploadAsset = async (file, kind) => {
  const formData = new FormData()
  formData.append('file', file)
  formData.append('kind', kind)
  const res = await fetch('/api/upload-asset', { method: 'POST', body: formData })
  return await res.json()
}
</script>

<template>
  <ProEditorElementPlus
    v-model="content"
    locale="en-US"
    :toolbar-options="toolbarOptions"
    :editor-behavior-options="editorBehaviorOptions"
    :upload-asset="uploadAsset"
  />
</template>

完整配置项见文档站: https://twoer.github.io/tiptap-vue-pro/guide/configuration

自定义工具栏

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { ProEditorElementPlus, type ToolbarConfig } from 'tiptap-vue-pro-element-plus'

const content = ref('<p>hello world</p>')
const toolbar: ToolbarConfig = [
  ['undo', 'redo'],
  ['bold', 'italic', 'underline'],
  ['link', 'image'],
]
</script>

<template>
  <ProEditorElementPlus v-model="content" :toolbar="toolbar">
    <template #toolbar-after="{ ctx }">
      <ElButton text @click="ctx.commands.hr('dashed')">虚线</ElButton>
    </template>
  </ProEditorElementPlus>
</template>

传 :toolbar="false" 可隐藏内置按钮;使用 toolbar 插槽可完全替换内置工具栏。

设置 toolbar-layout="compact" 可将低频操作收进结构化菜单;默认 classic 保持全部展开布局。

完整文档: https://twoer.github.io/tiptap-vue-pro/ 在线 Demo: https://twoer.github.io/tiptap-vue-pro/playground/