kensnyder / quill-image-drop-module

A module for Quill rich text editor to allow images to be pasted and drag/dropped into the editor.
214 stars 78 forks source link

Paste not working in chrome #24

Open joshStillerman opened 5 years ago

joshStillerman commented 5 years ago

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

phpwei commented 5 years ago

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

ondrap commented 4 years ago

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