quill-blot-formatter
quill-blot-formatter copied to clipboard
Integrating with vue-quill on Vue3 gives error.
<template>
<section>
<quill-editor
theme="snow"
toolbar="full"
v-model:content="content"
:options="options"
:modules="modules"
/>
</section>
</template>
<script>
import { QuillEditor } from "@vueup/vue-quill";
import BlotFormatter from "quill-blot-formatter";
export default {
name: "QEditor",
components: {QuillEditor},
data() {
return {
content: {},
options: {
placeholder: "Create a story...",
},
modules: {
name: "blotFormatter",
module: BlotFormatter,
options: {/* options */},
},
};
},
};
</script>
This is my code to integrate quill-blot-formatter with vue-quill but I am getting this console error. I followed this reference: https://vueup.github.io/vue-quill/guide/modules.html#example
quill-blot-formatter.js:187 Uncaught (in promise) TypeError: Cannot read property 'className' of undefined
at new BlotFormatter (quill-blot-formatter.js:187)
at SnowTheme.addModule (quill-59b73590.js:6093)
at SnowTheme.addModule (quill-59b73590.js:6719)
at quill-59b73590.js:6085
at Array.forEach (<anonymous>)
at SnowTheme.init (quill-59b73590.js:6083)
at new Quill (quill-59b73590.js:1182)
at initialize (vue-quill.js:1611)
at vue-quill.js:1585
at callWithErrorHandling (runtime-dom.esm-bundler-5d8bbcf1.js:1337)
Am I missing something in configuration or is it really an issue?
Some additional info from my debugging:
On putting breakpoints in quill-blot-formatter.js
I found in this line,
this.options = deepmerge(DefaultOptions, options, { arrayMerge: dontMerge });
DefaultOptions
is not getting populated and coming as undefined
for me.
I installed quill-blot-formatter
using npm
. The version I am using is: "quill-blot-formatter": "1.0.5"
do not use import BlotFormatter from 'quill-blot-formatter' use import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';
do not use import BlotFormatter from 'quill-blot-formatter' use import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';
It's a solution, but can you tell me why?
very strange. i use vite, in development no error shows, but in production it occur.
我也是遇到这个问题
en:yes . use vite dev no error , use vite build and preview is error zh-cn: 使用vite 开发模式,不会报错。打包也通过type-check 后 dist 部署,就会报错 en:This This problem led me to check for a long time zh-cn:这个问题 导致我 查了很久很久 en:This function of changing the image size is very important. Why don't you integrate it by yourself? You have to use plug-ins zh-cn:这个改变图片大小功能很重要,为什么官方不自己集成呢,非要用插件 last, thankyou
@xiaozuojiushizuoxiao can you create a fork and we work on it together?
@xiaozuojiushizuoxiao I have had the same problem. I tried this but I am getting the config wrong. If you can configure it properly and show me that will be nice
@Nelwhix Sorry to try other plug-ins
@xiaozuojiushizuoxiao If you find any good ones, please send here thanks
@Nelwhix Okay, you too
@xiaozuojiushizuoxiao I found an okay replacement here