How to paste plain text in a Quill-based 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

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 3

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

Answer 6

All the proposed options either didn't work for me or broke the logic of keyboard input. It was a decision for me

quill.on('text-change', function (delta, oldDelta, source) {
    if (source === 'paste') {
        var text = quill.getText();
        quill.setText(text);
    }
});

When changing the text, we check the resource, and if it is 'paste', we extract the text without formatting and set it.