quill-image-drop-module icon indicating copy to clipboard operation
quill-image-drop-module copied to clipboard

Paste not working in chrome

Open joshStillerman opened this issue 6 years ago • 2 comments

I have a vuejs2 project, and have embedded vue2-editor which is based on quill. I have added:

 import { ImageDrop } from 'quill-image-drop-module'
 import { ImageResize } from 'quill-image-resize-module'

and

  customModulesForEditor: [
    { alias: 'imageDrop', module: ImageDrop },
    { alias: 'imageResize', module: ImageResize }
  ],
  editorSettings: {
    modules: {
      imageDrop: true,
      imageResize: {}
    }
  }

dropping images works fine resizing images works fine Paste appears to be a noop.

I am trying to enable the pasting of screenshots

joshStillerman avatar Apr 18 '19 22:04 joshStillerman

index.js 文件中修改为 handlePaste(evt) { if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) { this.readFiles(evt.clipboardData.items, dataUrl => { const userAgent = navigator.userAgent; if (userAgent.indexOf('Firefox') > -1) { const selection = this.quill.getSelection(); if (selection) { } else { setTimeout(() => this.insert(dataUrl), 0); } } else { setTimeout(() => this.insert(dataUrl), 0); } }); } }

phpwei avatar Jul 07 '19 09:07 phpwei

This should be a PR, but I'll just paste it here: this is how I solved it - it disabled paste in firefox etc. and then handles everything the same. It might be better to do it only for some 'image/' data type but so far this seems to work.

handlePaste(evt) {
  if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) {
      for (const item of evt.clipboardData.items) {
        if (item.kind === 'file') {
          evt.preventDefault();
          this.readFiles(evt.clipboardData.items, dataUrl => {
            const selection = this.quill.getSelection();
            this.insert(dataUrl);
            // Move after the image
            if (selection) {
              this.quill.setSelection({index:selection.index + 2, length: 0});
            }
          });
          break;
        }
      }
    }
  }

ondrap avatar Aug 29 '19 09:08 ondrap