tiptap-vuetify
Advanced tools
WYSIWYG editor for Vuetify. The editor is based on tiptap and uses vuetify's components. :muscle:
If you have Vuetify 1.x (not 2.x), then you can find docs and demo here.
2.x and 1.x supportyarn add tiptap-vuetify
# Or
npm install --save tiptap-vuetify
If you have Nuxt.js, here is a simple demo how to integrate it (@nuxtjs/vuetify module is used).
The code for this example is taken from this github repository, you can find more infо there.
import Vue from 'vue'
import Vuetify from 'vuetify'
// import plugin
import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
// don't forget to import CSS styles
import 'tiptap-vuetify/dist/main.css'
// Vuetify's CSS styles
import 'vuetify/dist/vuetify.min.css'
// Vuetify Object (as described in the Vuetify 2 documentation)
const vuetify = new Vuetify()
// use Vuetify's plugin
Vue.use(Vuetify)
// use this package's plugin
Vue.use(TiptapVuetifyPlugin, {
// the next line is important! You need to provide the Vuetify Object to this place.
vuetify, // same as "vuetify: vuetify"
// optional, default to 'md' (default vuetify icons before v2.0.0)
iconsGroup: 'md'
})
More about vuetify icons you can read here.
<template>
<div>
<!-- Use the component in the right place of the template -->
<tiptap-vuetify
v-model="content"
:extensions="extensions"
/>
</div>
</template>
<script>
// import the component and the necessary extensions
import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, Paragraph, BulletList, OrderedList, ListItem, Link, Blockquote, HardBreak, HorizontalRule, History } from 'tiptap-vuetify'
export default {
// specify TiptapVuetify component in "components"
components: { TiptapVuetify },
data: () => ({
// declare extensions you want to use
extensions: [
History,
Blockquote,
Link,
Underline,
Strike,
Italic,
ListItem,
BulletList,
OrderedList,
[Heading, {
options: {
levels: [1, 2, 3]
}
}],
Bold,
Code,
HorizontalRule,
Paragraph,
HardBreak
],
// starting editor's content
content: `
<h1>Yay Headlines!</h1>
<p>All these <strong>cool tags</strong> are working now.</p>
`
})
}
</script>
Attention: it seems that this method does not work due to the fact that this is not done in the tiptap package itself. Therefore, it most likely will not work. More details.
There is another use case with the script tag (CDN version of package):
<script src="https://unpkg.com/tiptap-vuetify"></script>
Or
<script src="https://cdn.jsdelivr.net/npm/tiptap-vuetify"></script>
The plugin should be installed automatically after connecting the script.
The only thing is that the Vuetify object must be set in window.vuetify so that the plugin gets access to it.
Write if you have questions.
Placeholder is displayed when there is no content in the editor.
How to use:
<tiptap-vuetify
placeholder="Write something …"
/>
You can use the necessary extensions. The corresponding buttons are added automatically (in the order in which you specify the extension).
How to import and use them can be seen in the example above.
Available extensions (native tiptap extensions from tiptap-extensions package):
BoldItalicStrikeUnderlineCodeCodeBlockImageParagraphBulletList or OrderedList (use with the ListItem extension)ListItemLinkBlockquoteHardBreakHorizontalRuleHistoryTodoList (use with the TodoItem extension)TodoItemI can easily add more.
You can specify your attributes for the toolbar (<v-toolbar> vuetify component).
For example, change the color:
:toolbar-attributes="{ color: 'yellow' }"
Allows you to pass props for the editor's <v-card>.
<tiptap-vuetify
:card-props="{ flat: true, color: '#26c6da' }"
/>
Tiptap Editor properties (passed to the constructor).
You can see the full list of properties here.
This is the most powerful way to customize the editor for yourself. Pay particular attention to editorProps.
Only these properties are not available: content, onUpdate, they are used in this package.
If you want to add extensions to the extensions property, then use the native-extensions prop of this package.
You can transfer native extensions (not related to this package) to the extensions property.
How to use:
<tiptap-vuetify
:native-extensions="nativeExtensions"
/>
// You can import from tiptap's built-in extensions
import {
TrailingNode
} from 'tiptap-extensions'
// or your own extension
import Title from './Title'
// in script:
data () {
return {
nativeExtensions: [
new Title(),
new TrailingNode({
node: 'paragraph',
notAfter: ['paragraph'],
})
]
}
}
Here is example of how to create your extension from scratch.
A custom image upload / selection component allows you to upload images to or select images from your application's backend system. The when properly configured, the component will be displayed as a tab in the Add Image window.
To implement this, first create a component where users can upload and/or select images. The component will not get any props from the image window.
When a user selects an image, the component must emit a select-file event with an object containing src and alt properties.
For example:
selectImage() {
// When doing an asynchronous upload, you can set the src property to the value provided by the server (backend).
this.$emit('select-file', { src: '/path/to/image.jpg', alt: 'Uploaded image' });
}
To add your component to the image extension, make the following changes: Import your component, e.g.
import FileSelector from '~/Components/FileSelector'
Update tiptap-vuetify :extensions value for Image as follows:
...
[Image, {
options: {
imageSources: [
{ component: FileSelector, name: 'File Selector' }
]
}
}]
...
The value of name will be the tab name.
By default, your component will be added to tiptap-vuetify's own image sources (URL and data url Upload). If you want to exclude these image sources you can set imageSourcesOverride: true in the extension's options.
A basic example implementation can be found in the package's demo code in FileSelector.vue and Index.vue.
The format to output from the v-model. This defaults to html
For example, to get json instead:
<tiptap-vuetify
output-format="json"
/>
Flag for disabling entire editor (disabled toolbar items and ready-only content area). Default false.
For example, disabled editor by component prop:
<tiptap-vuetify
:disabled="editorDisabled"
/>
first argument (object):
{
// tiptap editor instance
editor: Editor
}
How to use:
<tiptap-vuetify
@init="onInit"
/>
Called when the editor receives a keydown event.
<tiptap-vuetify
@keydown="onKeyDown"
/>
methods: {
onkeydown (event, view) {
console.log('event', event.key)
}
}
Note: if you need to work with the Enter, then look here.
You can manually display the toolbar. How to use:
2.6.0 (new syntax):<tiptap-vuetify
v-model="content"
:extensions="extensions"
:toolbar-attributes="{ color: 'yellow' }"
>
<template #toolbar="{ buttons, commands, isActive }">
<!--You can render the buttons as you wish (you can see in the source code how this is done).-->
<pre>{{ buttons }}</pre>
</template>
</tiptap-vuetify>
2.6.0:<tiptap-vuetify>
<div
slot="toolbar"
slot-scope="{ buttons, commands, isActive }"
>
<!--You can render the buttons as you wish (you can see in the source code how this is done).-->
<pre>{{ buttons }}</pre>
</div>
</tiptap-vuetify>
Footer of the Editor.
You can add content before the toolbar.
You can add content after the toolbar.
💰 I can do some feature for you out of turn and at a fast pace or solve your problem, give a quick answers. To do this, you can pay me one-time or make a subscription. We can discuss the details by email, it is written in my profile.
FAQs
Vuetify WYSIWYG editor based on Tiptap.
We found that tiptap-vuetify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.