vuetify-pro-tiptap
Advanced tools
A WYSIWYG rich-text editor using tiptap and vuetify for Vue.js
English | 中文
👉https://yikoyu.github.io/vuetify-pro-tiptap/
en, zhHans)For Vuetify 2.x please use the latest version of vuetify-pro-tiptap@1.X.X
pnpm add vuetify-pro-tiptap
# or
yarn add vuetify-pro-tiptap
# or
npm i vuetify-pro-tiptap -S
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
]
})
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import App from './App.vue'
import { vuetifyProTipTap } from './tiptap'
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',
// 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
})
]
})
You can use the necessary extensions. The corresponding command-buttons will be added by declaring the order of the extension.
All available extensions：
BaseKitBoldItalicUnderlineStrikeColorHighlightHeadingTextAlignFontFamilyFontSizeSubAndSuperScriptBulletListOrderedListTaskListIndentLinkImageVideoTableEmojiBlockquoteHorizontalRuleCodeCodeBlockClearFullscreenHistory<script setup lang="ts">
import { ref } from 'vue'
import { mdiFileCodeOutline, mdiClose } from '@mdi/js'
import type { Editor } from '@tiptap/vue-3'
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">
<v-icon>{{ `svg:${mdiClose}` }}</v-icon>
</VBtn>
</VToolbar>
<VContainer>
<VSheet class="mx-auto" :max-width="maxWidth">
<VuetifyViewer :value="editor.getHTML()" />
</VSheet>
</VContainer>
</VCard>
</VDialog>
</ActionButton>
</template>
import { Extension } from '@tiptap/core'
import PreviewActionButton from '../components/PreviewActionButton.vue'
import type { ButtonView, GeneralOptions } from 'vuetify-pro-tiptap'
export interface PreviewOptions extends GeneralOptions {
button: ButtonView
}
export default Extension.create<PreviewOptions>({
name: 'preview',
addOptions() {
return {
divider: false,
spacer: false,
button: () => ({
component: PreviewActionButton,
componentProps: {}
})
}
}
})
You can declare when you install the plugin.
import { createVuetifyProTipTap } from 'vuetify-pro-tiptap'
const VuetifyProTipTap = createVuetifyProTipTap({
lang: 'zhHans'
})
Or use setLang dynamic change
import { locale } from 'vuetify-pro-tiptap'
locale.setLang('en')
Available languages:
Loading unavailable language, use setMessage for Settings
import { locale } from 'vuetify-pro-tiptap'
locale.setMessage('zhHant', {
// i18n text
})
locale.setLang('zhHant')
<script setup lang="ts">
import { ref } from 'vue'
import { VuetifyTiptap, VuetifyViewer } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'
import { BaseKit, Bold, Italic, Underline, Strike, Color, Highlight, Heading, Link, Image, Video, Table, Fullscreen, History } from 'vuetify-pro-tiptap'
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>
<v-app id="app">
<v-container>
<VuetifyTiptap v-model="content" label="Title" rounded :min-height="200" :max-height="465" :max-width="900" :extensions="extensions" />
<VuetifyViewer :value="content" />
</v-container>
</v-app>
</template>
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | string | '' | The input’s value |
| dark | boolean | false | Applies the dark theme variant to the component. |
| dense | boolean | false | Reduces the input height |
| outlined | boolean | true | Applies the outlined style to the input |
| flat | boolean | true | Removes the card’s elevation |
| disabled | boolean | false | Disable the input |
| label | string | undefined | Sets input label |
| hideToolbar | boolean | false | Hidden the toolbar |
| disableToolbar | boolean | false | Disable the toolbar |
| maxWidth | string | number | undefined | Sets the maximum width for the component. |
| minHeight | string | number | undefined | Sets the minimum height for the component. |
| maxHeight | string | number | undefined | Sets the maximum height for the component. |
| extensions | AnyExtension[] | [] | Tiptap the extensions |
| editorClass | string | string[] | Record<string, any> | undefined | Editor class |
| Name | Description |
|---|---|
| editor | Slot to customize editor |
| bottom | Slot to customize editor bottom |
| Name | Type | Default | Description |
|---|---|---|---|
| value | value | '' | The preview’s value |
| dark | boolean | false | Applies the dark theme variant to the component. |
| dense | boolean | false | Reduces the input height |
| hideMarkdownStyle | boolean | false | Hide .markdown-body class |
| xss | boolean | true | Enable xss filter |
| xssOptions | xss.IWhiteList | Default rule | Xss filter rule config |
| maxWidth | string | number | undefined | Sets the maximum width for the component. |
| Name | Description |
|---|---|
| before | Add content at the before |
| after | Add content at the after |
2.0.0 (2023-05-05)
FAQs
tiptap text editor on vuejs and vuetify
The npm package vuetify-pro-tiptap receives a total of 1,159 weekly downloads. As such, vuetify-pro-tiptap popularity was classified as popular.
We found that vuetify-pro-tiptap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.