How to paste plain text in a Quill-based editor - editor

Question

Quill (https://quilljs.com/) makes it simple to embed a quality text editor in a web page. When pasting html content in the editor, it filters the pasted html and then puts it into the text editor. My question is: How can I configure Quill so it pastes only plain text in the text editor? It would filter out all tags and leave the plain text only.
The documentation about the Clipboard module (http://quilljs.com/docs/modules/clipboard/) says that it is possible to add custom Matchers to the Clipboard, that will kind of filter the pasted text.
I don't know how to write a matcher that only allows plain text. Any help and any examples are much appreciated - thanks!

Answer 1

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. :)

Answer 2

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)

Answer 3

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

Answer 4

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

Answer 5

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