Integrating with vue-quill on Vue3 gives error.
See original GitHub issue<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"
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:11
Top Results From Across the Web
Quill Editor won't display v-model in input field (Vue 3)
I am using store.re.body (reactive store) to transport it to quill editor . store.js : import {reactive} from ...
Read more >Make a blog with Vue JS and Quill - Part 1 - YouTube
Part 1 Will teach you how to build a Rich Text Editor for creating your very own blog posts. Part 2 will show...
Read more >Vue Quill Editor - Lavalite
VueQuill Editor is a Component for building rich text editors and it is powered by Vue 3 and Quill. VueQuill is written entirely...
Read more >Wrapping Quill Editor in a Vue Component - Pine
By integrating it with Vue, we can make it even more powerful. Let's take a look, how to wrap a Quill editor in...
Read more >Using VueQuill editor in Vue.Js3 - DEV Community
It provides custom content and formatting- Quill introduced its own ... is a Vue component used to create a text editor powered by...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
do not use import BlotFormatter from ‘quill-blot-formatter’ use import BlotFormatter from ‘quill-blot-formatter/dist/BlotFormatter’;
very strange. i use vite, in development no error shows, but in production it occur.