Tiptapify

---

Tiptap 3 editor for Vue3 with Vuetify toolbar implementation

Status

Alpha

Not production ready (yet) - may contain bugs and internal logic may change

Requirements

- Vue 3.x
- Vuetify.js 3.x

Features

- Vuetify components
- Markdown support
- TypeScript support
- i18n
- Bubble Menu
- Floating Menu
- Slash Command
- Dark theme

Installation

Install package
``bash

npm

npm i tiptapify

or pnpm

pnpm i tiptapify
`

Register plugin in your main.js (main.ts)
`typescript
import TiptapifyPlugin from 'tiptapify';
import 'tiptapify/style.css';
app.use(TiptapifyPlugin, { locale: 'en' });
`
Should be something like this

`typescript
import { createApp } from "vue";
import App from "./App.vue";
import { aliases, mdi as mdiSvg } from 'vuetify/iconsets/mdi-svg'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const app = createApp(App)

const vuetify = createVuetify({
components,
directives,
icons: { defaultSet: 'mdi', aliases, sets: { mdiSvg } },
})

app.use(vuetify);

// add these lines
import TiptapifyPlugin from 'tiptapify';
import 'tiptapify/style.css';
app.use(TiptapifyPlugin, { locale: 'en' });

// Mount vue app
app.mount('#app')
`

Usage

`vue



`



You can choose which toolbar items to display by providing array/object to items prop

`vue



`



Also you can choose which toolbar items to ignore by providing prop items-exclude alongside items prop.

`vue



``

L10N (Localisation)

Found a wrong translation or want to add a new language? Feel free to send your translation made from the template.

Feedback

Found a bug or have ideas on improvement? Feel free to create a ticket.

$3

- [x] menu items list customizable
- [x] extend a built-in font list
- [x] raw html mode
- [x] fullscreen mode
- [x] tables extension
- [x] preview extension
- [x] image extension
- [x] text styling (background & font color)
- [x] dark theme
- [x] emoji extension
- [x] video extensions
- [x] filter option in emoji extension
- [x] option to provide custom extension
- [x] iframe extension
- [ ] charmap extension
- [ ] extended video extensions
- [ ] print hotkey in a tooltip
- [ ] demo
- [ ] documentation
- [ ] AI features

Licence

MIT