Quill modules usage

HI Do you have an example of how to use quill modules with react-quill.

I could not get quill-markdown-shortcuts to work. Here is the code:

import ReactQuill,  { Quill } from 'react-quill';
import { MarkdownShortcuts} from 'quill-markdown-shortcuts';
Quill.register('MarkdownShortcuts', MarkdownShortcuts);

...
render() {
...
        <ReactQuill value={'abcd'}
          modules={{
            MarkdownShortcuts: {}
          }}
        />
...
}
...

This is the Error that I get:

quill Cannot import modules/MarkdownShortcuts. Are you sure it was registered?
quill Cannot load MarkdownShortcuts module. Are you sure you registered it?
quill Cannot import modules/MarkdownShortcuts. Are you sure it was registered?
Uncaught TypeError: moduleClass is not a constructor
    at SnowTheme.addModule (quill.js:6052)
    at SnowTheme.addModule (quill.js:6696)

React-Quill version

1.3.0

Issue Analytics

State:
Created 5 years ago
Reactions:23
Comments:8

Top GitHub Comments

4reactions

pirsquarecommented, Jun 5, 2020

I’ve encountered similar issue while using original quilljs (not react-quill) and managed to solve it. In my case, it is due to invalid modules added to quill config.

// Original Config
const quillOptions = {
  modules: {
    toolbar: `quill-toolbar`,
    variable: {}
  }
};

After removing variable from modules, it worked for me.

// Fixed Config
const quillOptions = {
  modules: {
    toolbar: `quill-toolbar`
  }
};

For anyone encountering this issue, you may want to check if you’ve added unregistered modules to your config.

0reactions

osbeug001commented, Dec 4, 2022

I had a similar issue when importing and registering a module, my solution was to:

Import the module from the dist folder : import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter'
When registering, register the module’s default.: Quill.register('modules/blotFormatter', BlotFormatter.default);

Hope this helps.