How to change style of tiptap-vuetify - css

Question

I am using tiptap-vuetify(https://github.com/iliyaZelenko/tiptap-vuetify) as my wysiwyg edirtor. but I dont want the default styling. Sing it doesn't take class or style as prop how can I style it the way I want(like removing shadows, changing grey color to white etc.)

Answer 1

you need to import customize extension and I search about it
in this package tiptap-vuetify You can only use limited sections in this package such as :
Heading,
Bold,
Italic,
Strike,
Underline,
Code,
CodeBlock,
Paragraph,
BulletList,
OrderedList,
ListItem,
Blockquote,
HardBreak,
HorizontalRule,
History,
Link
this code can help you:
<template>
<div>
<tiptap-vuetify v-model="content" :extensions="extensions" />
</div>
</template>
<script>
import {
// component
TiptapVuetify,
Underline,
Bold,
Italic,
Link,
Paragraph,
BulletList,
ListItem,
History,
} from "tiptap-vuetify";
export default {
components: { TiptapVuetify },
created() {
this.$vuetify.rtl = false;
},
data: () => ({
extensions: [
new Bold(),
new Italic(),
new Underline(),
// new Code(),
// new CodeBlock(),
new Paragraph(),
new BulletList(),
// new OrderedList(),
new ListItem(),
new Link(),
// new Blockquote(),
// new HardBreak(), // Shift + Enter
// new HorizontalRule(),
new History(),
],
content: `
<h1>Most basic use</h1>
<p>
You can use the necessary Extensions.
The corresponding buttons are
<strong>
added automatically
</strong>.
</p>
<pre><code><tiptap-vuetify v-model="content" :extensions="extensions"/></code></pre>
<p></p>
<h2>Icons</h2>
<p>Avaliable icons groups:</p>
<ol>
<li>
<p>Material Design <em>Official</em></p>
</li>
<li>
<p>Font Awesome (FA)</p>
</li>
<li>
<p>Material Design Icons (MDI)</p>
</li>
</ol>
<p></p>
<blockquote>
<p>This package is awesome!</p>
</blockquote>
<p></p>
`,
}),
};
</script>
this link can help you