羽毛笔注册处理程序

时间:2018-12-20 20:46:46

标签: node.js image wysiwyg quil

我正在尝试在Quill中注册自定义处理程序。此链接https://github.com/quilljs/quill/issues/2034

中的最后一个

这就是我的js的样子。

    import Quill from 'quill';
    import {
      imageHandler
    } from '../functions/imageHandler';

    // Implement and register module
    Quill.register('modules/imageHandler', imageHandler)


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

这是../functions/imageHander的外观

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);
    }
}

但是我仍然遇到错误

VM1452 frontCore.js:18 Uncaught TypeError: Cannot read property 'imageHandler' of undefined
    at eval (VM1452 frontCore.js:18)
    at Module../core/functions/frontCore.js (VM1451 bundle.js:97)
    at __webpack_require__ (VM1451 bundle.js:20)
    at VM1451 bundle.js:84
    at VM1451 bundle.js:87

任何想法我该怎么办?

0 个答案:

没有答案