Vuetify Pro Tiptap

一个 Vue.js 的基于 tiptap 和 vuetify 的「所见即所得」富文本编辑器

English | 中文

Demo

👉https://yikoyu.github.io/vuetify-pro-tiptap/

👾Stackblitz

👾Nuxt3 Stackblitz

特色

使用 vuetify 组件
许多开箱即用的 extension (欢迎提交 issue 为新的 feature 留下建议)
支持 markdown 语法
TypeScript 支持
支持 i18n
Vuetify 3.x 和 Vue 3.x 支持

Vuetify 2.x

Vuetify 2.x 请使用最新版本的 vuetify-pro-tiptap@1.X.X

安装

NPM安装

pnpm add vuetify-pro-tiptap
# 或者
yarn add vuetify-pro-tiptap
# 或者
npm i vuetify-pro-tiptap -S

安装插件

tiptap.ts

import { markRaw } from 'vue'
import { VuetifyTiptap, VuetifyViewer, createVuetifyProTipTap } from 'vuetify-pro-tiptap'
import { BaseKit, Bold, Italic, Underline, Strike, Color, Highlight, Heading, TextAlign, FontFamily, FontSize, SubAndSuperScript, BulletList, OrderedList, TaskList, Indent, Link, Image, Video, Table, Blockquote, HorizontalRule, Code, CodeBlock, Clear, Fullscreen, History } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'
import SelectImage from './components/SelectImage.vue'

export const vuetifyProTipTap = createVuetifyProTipTap({
  lang: 'zhHans',
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  extensions: [
    BaseKit.configure({
      placeholder: {
        placeholder: 'Enter some text...'
      }
    }),
    Bold,
    Italic,
    Underline,
    Strike,
    Code.configure({ divider: true }),
    Heading,
    TextAlign,
    FontFamily,
    FontSize,
    Color,
    Highlight.configure({ divider: true }),
    SubAndSuperScript.configure({ divider: true }),
    Clear.configure({ divider: true }),
    BulletList,
    OrderedList,
    TaskList,
    Indent.configure({ divider: true }),
    Link,
    Image.configure({
      imageTabs: [{ name: 'SELECT', component: markRaw(SelectImage) }],
      // hiddenTabs: ['upload'],
      upload(file: File) {
        const url = URL.createObjectURL(file)
        console.log('mock upload api :>> ', url)
        return Promise.resolve(url)
      }
    }),
    Video,
    Table.configure({ divider: true }),
    Blockquote,
    HorizontalRule,
    CodeBlock.configure({ divider: true }),
    History.configure({ divider: true }),
    Fullscreen
  ]
})

main.ts

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'
import { vuetifyProTipTap } from './tiptap'

import 'vuetify/styles'

const vuetify = createVuetify()

const app = createApp(App)
app.use(vuetify)
app.use(vuetifyProTipTap)

// fix warning injected property "decorationClasses" is a ref and will be auto-unwrapped
// https://github.com/ueberdosis/tiptap/issues/1719
app.config.unwrapInjectedRef = true

app.mount('#app')

全局设置

import { markRaw } from 'vue'
import { VuetifyTiptap, VuetifyViewer, createVuetifyProTipTap, defaultBubbleList } from 'vuetify-pro-tiptap'
import { BaseKit, Image, Fullscreen } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'
import SelectImage from './components/SelectImage.vue'

export const vuetifyProTipTap = createVuetifyProTipTap({
  // Set default lang
  lang: 'zhHans',
  // Set markdown theme
  markdownTheme: 'github',
  // Global registration app.component
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  // Global registration extensions
  extensions: [
    BaseKit.configure({
      placeholder: {
        placeholder: 'Enter some text...'
      },
      bubble: {
        // default config
        list: {
          image: [ 'float-left', 'float-none', 'float-right', 'divider', 'size-small', 'size-medium', 'size-large', 'divider', 'textAlign', 'divider', 'image', 'image-aspect-ratio', 'remove'],
          text: ['bold', 'italic', 'underline', 'strike', 'divider', 'color', 'highlight', 'textAlign', 'divider', 'link'],
          video: ['video', 'remove']
        },
        defaultBubbleList: editor => {
          // You can customize the bubble menu here
          return defaultBubbleList(editor) // default customize bubble list
        }
      }
    }),
    Image.configure({
      // Generate a VDivider after the button
      divider: true,
      // Custom image tabs
      imageTabs: [{ name: 'SELECT', component: markRaw(SelectImage) }],
      // hidden default tab
      hiddenTabs: ['upload'],
      // custom upload function
      upload(file) {
        const url = URL.createObjectURL(file)
        console.log('mock upload api :>> ', url)
        return Promise.resolve(url)
      }
    }),
    Fullscreen.configure({
      // Generate a VSpacer after the button
      spacer: true
    })
  ]
})

Extensions

你可以只使用需要的 extension，对应的菜单按钮将会按照你声明的顺序被添加。

所有可用的 extensions：

BaseKit
Bold
Italic
Underline
Strike
Color
Highlight
Heading
TextAlign
FontFamily
FontSize
SubAndSuperScript
BulletList
OrderedList
TaskList
Indent
Link
MarkdownTheme
Image
Video
Table
Blockquote
HorizontalRule
Code
CodeBlock
Clear
Fullscreen
History

自定义主题

创建 github.scss

$value: 'github';

.vuetify-pro-tiptap-editor__content.markdown-theme-#{$value} {
  // 自定义样式
  &.__dark {
    // dark 模式下的自定义样式
  }
}

在 ts 中导入 github.scss

// import 'vuetify-pro-tiptap/style.css' // 导入全部（editor 和 markdown）样式
import 'vuetify-pro-tiptap/styles/editor.css' // 只使用 editor 样式，不使用 markdown 样式
import './styles/markdown/github.scss'

在组件中使用

<template>
  <VuetifyTiptap v-model="content" markdown-theme="github" />
  <VuetifyViewer :value="content" markdown-theme="github" />
</template>

自定义 extension

PreviewActionButton.vue

<script setup lang="ts">
import type { Editor } from '@tiptap/vue-3'
import { mdiClose, mdiFileCodeOutline } from '@mdi/js'
import { ref } from 'vue'
import { ActionButton } from 'vuetify-pro-tiptap'

interface Props {
  editor: Editor
  tooltip?: string
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  tooltip: undefined,
  disabled: false
})

const dialog = ref(false)
const maxWidth = ref<number>(900)
</script>

<template>
  <ActionButton tooltip="全屏" :disabled="disabled">
    <VIcon>{{ `svg:${mdiFileCodeOutline}` }}</VIcon>
    <VDialog v-model="dialog" fullscreen hide-overlay activator="parent">
      <VCard>
        <VToolbar dark color="primary">
          <VBtn icon dark @click="dialog = false">
            <VIcon>{{ `svg:${mdiClose}` }}</VIcon>
          </VBtn>
        </VToolbar>

        <VContainer>
          <VSheet class="mx-auto" :max-width="maxWidth">
            <VuetifyViewer :value="editor.getHTML()" />
          </VSheet>
        </VContainer>
      </VCard>
    </VDialog>
  </ActionButton>
</template>

preview.ts

import type { ButtonView, GeneralOptions } from 'vuetify-pro-tiptap'

import { Extension } from '@tiptap/core'
import PreviewActionButton from '../components/PreviewActionButton.vue'

export interface PreviewOptions extends GeneralOptions {
  button: ButtonView
}

export default Extension.create<PreviewOptions>({
  name: 'preview',
  addOptions() {
    return {
      divider: false,
      spacer: false,
      button: () => ({
        component: PreviewActionButton,
        componentProps: {}
      })
    }
  }
})

国际化

设置语言

你可以在安装插件的时候声明

import { createVuetifyProTipTap } from 'vuetify-pro-tiptap'

const VuetifyProTipTap = createVuetifyProTipTap({
  lang: 'zhHans'
})

或者调用方法动态修改

import { locale } from 'vuetify-pro-tiptap'

locale.setLang('en')

可用的语言:

en (默认)
zhHans
nl
de

加载新语言

当前语言暂未提供时，可以使用 setMessage 进行设置

import { locale } from 'vuetify-pro-tiptap'

locale.setMessage('zhHant', {
  // 国际化文本
})
locale.setLang('zhHant')

用法

<script setup lang="ts">
import { ref } from 'vue'
import { BaseKit, Bold, Color, Fullscreen, Heading, Highlight, History, Image, Italic, Link, Strike, Table, Underline, Video, VuetifyTiptap, VuetifyViewer } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'

const extensions = [
  BaseKit.configure({
    placeholder: {
      placeholder: 'Enter some text...'
    }
  }),
  Bold,
  Italic,
  Underline,
  Strike,
  Color,
  Highlight,
  Heading,
  Link,
  Image,
  Video,
  Table,
  Fullscreen,
  History
]

const content = ref('')
</script>

<template>
  <VApp id="app">
    <VContainer>
      <VuetifyTiptap v-model="content" label="Title" rounded :min-height="200" :max-height="465" :max-width="900" :extensions="extensions" />
      <VuetifyViewer :value="content" />
    </VContainer>
  </VApp>
</template>

Props

VuetifyTiptap

Props

名称	类型	默认值	说明
modelValue	string	''	输入的值
markdownTheme	string \| false	'default'	markdown主题
output	'html' \| 'json' \| 'text'	'html'	输出格式
dark	boolean	false	是否为深色主题
dense	boolean	false	是否为紧凑模式
outlined	boolean	true	将轮廓样式应用于输入
flat	boolean	true	移除卡片的 elevation
disabled	boolean	false	禁用输入
label	string	undefined	设置输入标签
hideToolbar	boolean	false	隐藏工具栏
disableToolbar	boolean	false	禁用工具栏
hideBubble	boolean	false	隐藏气泡菜单
removeDefaultWrapper	boolean	false	删除编辑器为空时默认的包装器
maxWidth	string \| number	undefined	输入框最大宽度
minHeight	string \| number	undefined	输入框最小高度
maxHeight	string \| number	undefined	输入框最大高度
extensions	AnyExtension[]	[]	tiptap插件
editorClass	string \| string[] \| Record<string, any>	undefined	编辑器class

Slots

名称	说明
editor	自定义编辑器的插槽
bottom	自定义编辑器底部的插槽

Event

名称	类型	说明
update:modelValue	string \| JSONContent	编辑器 onUpdate 时处触发
update:markdownTheme	string	切换主题时触发
change	{ editor: Editor, output: string \| JSONContent }	编辑器 onUpdate 时处触发
enter		键盘输入回车时触发

VuetifyViewer

Props

名称	类型	默认值	说明
value	string \| JSONContent	''	预览的值
dark	boolean	false	是否为深色主题
dense	boolean	false	是否为紧凑模式
markdownTheme	string \| false	'default'	markdown主题
xss	boolean	true	是否开启xss过滤
xssOptions	xss.IWhiteList	内置默认规则	xss过滤规则配置
maxWidth	string \| number	undefined	预览最大宽度
extensions	AnyExtension[]	[]	tiptap插件

Slots

名称	说明
before	在顶部添加内容
after	在底部添加内容

🏗 贡献代码

🍴Fork it
🔀Create your branch: git checkout -b your-branch
🎨Make your changes
📝Commit your changes with Semantic Commit Messages (recommended)
🚀Push to the branch: git push origin your-branch
🎉Submit a PR to master branch

📄 许可证

MIT

🌹 鸣谢

vuetify
tiptap
element-tiptap

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.zh-CN.md

README.zh-CN.md

Vuetify Pro Tiptap

Demo

特色

Vuetify 2.x

安装

NPM安装

安装插件

全局设置

Extensions

自定义主题

自定义 extension

国际化

设置语言

加载新语言

用法

Props

VuetifyTiptap

Props

Slots

Event

VuetifyViewer

Props

Slots

🏗 贡献代码

📄 许可证

🌹 鸣谢

Files

README.zh-CN.md

Latest commit

History

README.zh-CN.md

File metadata and controls

Vuetify Pro Tiptap

Demo

特色

Vuetify 2.x

安装

NPM安装

安装插件

全局设置

Extensions

自定义主题

自定义 extension

国际化

设置语言

加载新语言

用法

Props

VuetifyTiptap

Props

Slots

Event

VuetifyViewer

Props

Slots

🏗 贡献代码

📄 许可证

🌹 鸣谢