Customize the Toolbar

[mirkos93]

Hello, I have some problems following this example in your documentation:

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

It would appear that the buttons variable is undefined. Where should I get the buttons to show on my custom toolbar?

Thank you

[JDevFrame]

you can do like this . The highlight is my native-extensions. you can use the bold、H1、H2 and so on.

 <tiptap-vuetify v-model="info.content" :native-extensions="nativeExtensions"  :extensions="extensions" output-format="json" :toolbar-attributes="{ color: 'yellow' }" :card-props="{ flat: true}" >
      <template #toolbar="{ buttons, commands, isActive }">
        <div>
        <button
          :class="{ 'is-active': isActive.highlight() }"
          style="margin-right: 0.5rem"
          @click="commands.highlight({class: 'mark'})"
        >
        highlight
        </button>
         <button
          :class="{ 'is-active': isActive.highlight() }"
          style="margin-right: 0.5rem"
          @click="commands.highlight({class: null})"
        >
        disDighlight
        </button>

        </div>

      </template>
    </tiptap-vuetify>

[mirkos93]

Hi @JDevFrame thank you for your reply. I've tried your solution but the toolbar disappears because the commands array is empty on my end. Can you give a working example? Thank you

[wodutoit]

I tried this as well and it doesn't work I changed the (https://codesandbox.io/s/6p9wp?file=/src/examples/Simple.vue) example to include <template v-slot:toolbar="item"> <pre>{{item}}</pre> </template> it just prints

All I wanted to do was add a "small" to the icons as the toolbar is a bit too big for my use case. Thanks

[ariefsn]

any update for this? happend to me :(