Can quill-blot-formatter2 for Vue-Quill work?
I am using vue-quill but quite unable to get this to work. Current package.json:
```
{
"name": "blog",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "nuxt dev",
"build": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.mjs build",
"lint": "eslint . -c .eslintrc.cjs --fix --ext .ts,.js,.cjs,.vue,.tsx,.jsx",
"build:icons": "tsx plugins/iconify/build-icons.ts",
"postinstall": "nuxt prepare && npm run build:icons",
"generate": "nuxt generate"
},
"dependencies": {
"@date-io/dayjs": "^3.2.0",
"@directus/sdk": "^19.1.0",
"@floating-ui/dom": "1.6.8",
"@iconify-json/bxl": "^1.1.10",
"@stylistic/stylelint-config": "^1.0.1",
"@types/quill": "^2.0.14",
"@vuepic/vue-datepicker": "^11.0.2",
"@vueup/vue-quill": "^1.2.0",
"@vueuse/core": "^10.11.1",
"@vueuse/math": "^10.11.1",
"apexcharts": "^3.54.1",
"axios": "^1.9.0",
"dayjs": "^1.11.13",
"nuxt": "3.14.1592",
"pinia": "^2.3.0",
"pinia-plugin-persistedstate": "^4.3.0",
"prismjs": "^1.29.0",
"quill-blot-formatter": "^1.0.5",
"quill-image-uploader": "^1.3.0",
"roboto-fontface": "^0.10.0",
"vue-flatpickr-component": "11.0.5",
"vue-prism-component": "^2.0.0",
"vue3-apexcharts": "1.5.2",
"vue3-perfect-scrollbar": "^2.0.0",
"vuetify": "3.7.5",
"webfontloader": "^1.6.28",
"zod": "^3.25.28"
},
"devDependencies": {
"@antfu/eslint-config-vue": "^0.43.1",
"@antfu/utils": "^0.7.10",
"@iconify-json/ri": "^1.2.1",
"@iconify/tools": "^4.0.7",
"@iconify/utils": "^2.1.13",
"@iconify/vue": "4.1.2",
"@nuxtjs/device": "^3.2.4",
"@pinia/nuxt": "^0.9.0",
"@types/node": "^22.10.2",
"@types/webfontloader": "^1.6.35",
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0",
"@vueuse/nuxt": "^12.2.0",
"eslint": "^8.57.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-case-police": "^0.6.1",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-promise": "^6.6.0",
"eslint-plugin-regex": "^1.10.0",
"eslint-plugin-regexp": "^2.6.0",
"eslint-plugin-sonarjs": "^0.24.0",
"eslint-plugin-unicorn": "^51.0.1",
"eslint-plugin-vue": "^9.32.0",
"postcss-html": "^1.7.0",
"postcss-scss": "^4.0.9",
"sass": "~1.76.0",
"stylelint": "16.8.0",
"stylelint-codeguide": "2.0.0",
"stylelint-config-idiomatic-order": "10.0.0",
"stylelint-config-standard-scss": "13.1.0",
"stylelint-use-logical-spec": "5.0.1",
"tsx": "^4.19.2",
"type-fest": "^4.30.1",
"typescript": "^5.7.2",
"vite": "^5.4.11",
"vite-plugin-vuetify": "2.0.3",
"vite-svg-loader": "^5.1.0"
},
"resolutions": {
"postcss": "^8",
"stylelint-order": "6.0.3",
"@types/video.js": "^7"
},
"overrides": {
"postcss": "^8",
"stylelint-order": "6.0.3",
"@types/video.js": "^7",
"quill": "^2.0.2"
},
"engines": {
"node": ">=22.0.0"
}
}
```
When following examples, error is:
`@enzedonline_quill-blot-formatter2.js?v=8e31a89c:139 Uncaught TypeError: Class extends value undefined is not a constructor or null`
quillEditor.client.ts:
```
import { defineNuxtPlugin } from "#app"
import { QuillEditor } from "@vueup/vue-quill"
import Quill from "quill"
import BlotFormatter2 from "@enzedonline/quill-blot-formatter2"
import ImageUploader from "quill-image-uploader"
import "@vueup/vue-quill/dist/vue-quill.snow.css"
import "quill-image-uploader/dist/quill.imageUploader.min.css"
Quill.register("modules/blotFormatter", BlotFormatter2)
Quill.register("modules/imageUploader", ImageUploader)
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.component("QuillEditor", QuillEditor)
})
```
关闭于 2025-06-11 2 条评论