How to paste plain text in a Quill-based editor

After trial and error, I found the answer. The following matcher will cause the editor to paste plain text only:

quill.clipboard.addMatcher (Node.ELEMENT_NODE, function (node, delta) {
    var plaintext = $ (node).text ();
    return new Delta().insert (plaintext);
});

It uses jQuery. :)

For the googlers;

I created a Quill plugin, that removes all tags and attributes that are not supported. Unless otherwise configured it detects that by looking into the toolbar module.

I thought I post it here so others will not have to struggle :)

https://www.npmjs.com/package/quill-paste-smart

Couldn't get the answer to work. Here's another method that patches the clipboard module to accept plain text only.

GitHub Gist:

https://gist.github.com/prodrammer/d4d205594b2993224b8ad111cebe1a13

Clipboard implementation:

import Quill from 'quill'
const Clipboard = Quill.import('modules/clipboard')
const Delta = Quill.import('delta')

class PlainClipboard extends Clipboard {
  onPaste (e) {
    e.preventDefault()
    const range = this.quill.getSelection()
    const text = e.clipboardData.getData('text/plain')
    const delta = new Delta()
    .retain(range.index)
    .delete(range.length)
    .insert(text)
    const index = text.length + range.index
    const length = 0
    this.quill.updateContents(delta, 'silent')
    this.quill.setSelection(index, length, 'silent')
    this.quill.scrollIntoView()
  }
}

export default PlainClipboard

Example usage:

import Quill from 'quill'
import PlainClipboard from './PlainClipboard'

Quill.register('modules/clipboard', PlainClipboard, true)

Updated solution of teusbenschop - works without jQuery and also fix problem with missing Delta object.

quill.clipboard.addMatcher (Node.ELEMENT_NODE, function (node, delta) {
    var plaintext = node.innerText
    var Delta = Quill.import('delta')
    return new Delta().insert(plaintext)
})