如何改变tiptap-vuetify的风格

Question

我正在使用tiptap-vuetify(https://github.com/iliyaZelenko/tiptap-vuetify)作为我的所见即所得编辑器。但是我不想要默认的样式。Sing它不以类或风格为道具我如何按照我想要的方式来设计它(如去除阴影，将灰色改为白色等)

​

Answer 1

您需要导入自定义扩展，我在此包tiptap-vuetify中搜索它，您只能使用此包中的有限部分，例如：

   Heading,
   Bold,
   Italic,
   Strike,
   Underline,
   Code,
   CodeBlock,
   Paragraph,
   BulletList,
   OrderedList,
   ListItem,
   Blockquote,
   HardBreak,
   HorizontalRule,
   History,
   Link

此代码可以帮助您：

<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>

此link可以帮助您