struggling vue3 vueQuill adding table

Question

i tried my best for few days... but i have no idea how to add table module into my vue3 project. i tried many ways and I stucked here...

// imports
  import { QuillEditor } from "@vueup/vue-quill";
  import Quill from "quill";
  import "@vueup/vue-quill/dist/vue-quill.snow.css";
  import QuillBetterTable from "quill-better-table";


// template
 <QuillEditor
  ref="korQuill"
  v-model:content="state.button_comment"
  content-type="html"
  theme="snow"
  :toolbar="[
    ['bold', 'italic'], // toggled buttons
    [{ header: 1 }, { header: 2 }], // custom button values
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ indent: '-1' }, { indent: '+1' }], // outdent/indent

    [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ align: [] }],
    ['link', 'image'],
  ]"
  :modules="modules"
/>



const modules = ref({
  module: QuillBetterTable,
});


mounted() {
  Quill.register({
    "modules/better-table": QuillBetterTable,
  })
}

I went round and round and came here. Due to the lack of documentation, it was difficult to work with.

Brad · Accepted Answer · 2023-01-16 23:43:57Z

2

I know its a bit late, but vue-quill uses v1.x of quill where as quill-better-tables uses v2.x

This is likely your problem.

I will agree the docs vue vue-quill are awful its so difficult to marry it up with the quill docs. Im on the brink of going to back to TinyMCE

answered Jan 16, 2023 at 23:43

Brad

8,80811 gold badges48 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chul Gim Over a year ago

I changed to CKEditor5. Thank you!

Collectives™ on Stack Overflow

struggling vue3 vueQuill adding table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related