iliyaZelenko / tiptap-vuetify

Vuetify editor. Component simplifies integration tiptap editor with vuetify.
https://iliyazelenko.github.io/tiptap-vuetify-demo/
800 stars 127 forks source link

Custom Toolbar #345

Open dishly opened 2 years ago

dishly commented 2 years ago

First of all, thanks for this amazing project. I'm trying to customise the toolbar, so far the code below works. The only problem is that @click="commands.bold" works nicely but @click="commands.link" does not work.

Why commands doesn't launch the link, image or table extension? I've spent hours trying to figure this out but there is no documentation or examples about this.

        <tiptap-vuetify
            v-model="content"
            :extensions="extensions"
            @blur="emitToParent(content)"
        >
            <template #toolbar="{ commands, isActive }">
                <div class="theme--light grey lighten-4 pa-1">
                    <v-btn
                        small
                        text
                        icon
                        title="Bold"
                        :class="{ 'grey lighten-2': isActive.bold() }"
                        @click="commands.bold"
                    >
                        <v-icon>mdi-format-bold</v-icon>
                    </v-btn>
                    <v-btn
                        small
                        text
                        icon
                        title="Add Link"
                        @click="commands.link"
                    >
                        <v-icon>mdi-link</v-icon>
                    </v-btn>
                </div>
            </template>
        </tiptap-vuetify>