[Vuejs]-How to change style of tiptap-vuetify

by

0👍

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>&lt;tiptap-vuetify v-model="content" :extensions="extensions"/&gt;</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

Leave a comment