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!

teusbenschop · Accepted Answer · 2016-12-20T09:52:09.917

11

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

edited Dec 20 '16 at 09:52

answered Dec 20 '16 at 08:43

teusbenschop

596
2
6
16

Is it possible to do the same thing using removeFormat() – Natim Oct 27 '17 at 11:20
@Natim please try it, would be great :) – teusbenschop Oct 27 '17 at 15:26
I would but I am having a hard time finding out the range from the delta I get in the paste event. – Natim Oct 30 '17 at 09:26
why pasting into Natim's example bbb doesnt work(I use ctrl+v)? It shows string with tags? – Michal - wereda-net Oct 09 '18 at 19:37

Ryan Haney · Answer 2 · 2020-08-06T16:48:06.957

11

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)

edited Aug 06 '20 at 16:48

answered Jul 10 '18 at 00:15

Ryan Haney

500
1
6
9

What is this.quill in PlainClipboard? How do I get this.quill in PlainClipboard? – Abhijeet Dec 06 '19 at 12:07
It's inherited from the Clipboard class provided by quill. Not sure if this changed. I use quill version 1.3.6. – Ryan Haney Dec 06 '19 at 18:53
1

@RyanHaney I got null value for this.quill.getSelection(). Any idea what could be the issue? – susmita rai Dec 02 '20 at 05:37
@susmitarai Are you using quill 1.3.6? I'm not sure what it would take to get it working in quill 1.3.7. – Ryan Haney Dec 02 '20 at 18:30
Hello @RyanHaney, I was able to paste the plan text in editor. But whenever I save it , the text doesn't get save. Seems like the pasted content is not bonded with the editor while saving – susmita rai Feb 26 '21 at 05:23

score 8 · Answer 3 · edited Sep 19 '20 at 17:29

8

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

edited Sep 19 '20 at 17:29

vsync

118,978
58
307
400

answered Mar 06 '19 at 14:59

quick

1,104
10
19

score 3 · Answer 4 · answered Apr 25 '20 at 19:15

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

score 0 · Answer 5 · answered Jul 22 '22 at 06:42

0

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

answered Jul 22 '22 at 06:42

Arvind Thakar

1

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Jul 24 '22 at 01:46

How to paste plain text in a Quill-based editor

5 Answers5

Linked