CODEWITHSUNDEEP
frontendrichtextboxrich-text-editorquill
kelvin
kelvin

Reputation: 21

Quill 1.3.6, Upload all images when paste them to the editor

I need to upload all images when paste rich text(HTML), and then replace their urls with the urls that fetched from upload API. So I tired this:

const Delta = Quill.import('delta');
this.quill.clipboard.addMatcher('img', async (node, delta) => {
  console.log(node, delta);
  const url = await new Promise(resolve => {
    // upload image
    this.props.uploadImageURL({ url: delta.ops[0].insert.image }).then(res => {
      if (res.success) {
        resolve(res.data.path)
      } else {
        resolve('')
      }
    }, () => { resolve('') })
  });

  if (url) {
    return {
      ops: [{
        insert: {
          image: url
        }
      }]
    };
  } else {
    return new Delta();
  }
});

then error: enter image description here

Who can help me ?

Upvotes: 0

Views: 3394

Answers (1)

Thomas Praxl
Thomas Praxl

Reputation: 777

It seems that you cannot use an async matcher function at this point.

Simplified working Example without async follows. As soon as you try to return a promise (async), this will fail:

const Delta = Quill.import('delta');
quill.clipboard.addMatcher('img', (node, delta) => {
  console.log(node, delta);
  const url = 'http://www.placehold.it/666x333.jpg';

  return new Delta().insert({image: url});

});

So it seems, you need to find a synchronous way to replace images.

Upvotes: 1

Related Questions