节点：未捕获的类型错误：moduleClass 不是构造函数

Question

我想在 quill 中导入处理程序。但我仍然收到此错误Uncaught TypeError: moduleClass is not a constructor

这就是 quill 函数的工作原理

import Quill from 'quill';

// IMAGE HANDLER
    const imageHandler = () => {
      const input = document.createElement('input');

      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');
      input.click();

      input.onchange = async () => {
        const file = input.files[0];
        const formData = new FormData();

        formData.append('image', file);

        // Save current cursor state
        const range = this.quill.getSelection(true);

        // Insert temporary loading placeholder image
        this.quill.insertEmbed(range.index, 'image', `${ window.location.origin }/images/loaders/placeholder.gif`);

        // Move cursor to right side of image (easier to continue typing)
        this.quill.setSelection(range.index + 1);

        const res = await apiPostNewsImage(formData); // API post, returns image location as string e.g. 'http://www.example.com/images/foo.png'

        // Remove placeholder image
        this.quill.deleteText(range.index, 1);

        // Insert uploaded image
        this.quill.insertEmbed(range.index, 'image', res.body.image);
      }
    }

// Initialize quill
    var quill = new Quill('#editor', {
      theme: 'snow',
      modules: {
        toolbar: '#toolbar',
        handlers: {
          image: imageHandler,
        }
      }
    });

当我打开错误的地方时，它给出了来自 quill.js 的这部分代码

{
    key: 'addModule',
    value: function addModule(name) {
      var moduleClass = this.quill.constructor.import('modules/' + name);
      this.modules[name] = new moduleClass(this.quill, this.options.modules[name] || {});
      return this.modules[name];
    }

我不确定是否做错了或者羽毛笔方面是否有问题。

Answer 1

我最初也遇到了这个错误，但我通过以下方式更改模块结构解决了它：

modules: {
   toolbar: {
      container: '#toolbar',
      handlers: {
         image: imageHandler
      }
   }
}

请注意，处理程序现在是在工具栏内定义的，而不是在工具栏旁边（有关文档，请参阅https://quilljs.com/docs/modules/toolbar/）。