Cant hide toolbar

[MickL]

Version @vueup/vue-quill: ^1.2.0

Describe the bug I tried to hide the toolbar:

<script setup lang="ts">
    import { QuillEditor } from '@vueup/vue-quill';
    import '@vueup/vue-quill/dist/vue-quill.snow.css';

    const html = defineModel<string>();
</script>

<template>
    <QuillEditor v-model:content="html" contentType="html" theme="snow" :modules="{toolbar: false}" />
</template>

But it results in an error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'register')

Browser (please complete the following information):

• Browser Chrome
• Version 122.0.6261.69

Additional context

• Operating System: Darwin
• Node Version: v21.6.1
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MickL]

I switched to Tiptap but this issue should still stay open as it is not fixed. Stale bot is the worst.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MickL]

Not fixed still, please dont close unfixed issues

[cibilex]

I solved this issue by hiding the toolbar with css.Here is an example css code to hide the toolbar:

.without-toolbar .ql-toolbar {
  display: none !important;
  border: 0 !important;
}
.without-toolbar .my-quill,
.without-toolbar .ql-editor.ql-blank {
  padding: 0 !important;
  padding-left: 8px !important;
  border: 0 !important;
}

Here is my html code:

  <QuillEditor
    v-model:content="text"
    contentType="html"
    ref="editor"
    class="my-quill"
    @ready="focus"
    placeholder="Description..."
    :toolbar=" [
            [{ font: [] }, { size: [] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ color: [] }, { background: [] }],
            [{ header: '1' }, { header: '2' }, 'blockquote', 'code-block'],
            [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
            ['link', 'image'],
          ]"
    theme="snow"
    :modules="quillModules"
  />

I achieved to hide the toolbar with this solution.