How to remove unwanted formatting in pasted text

[zasunkx]

In my Quill editor, I am including only a limited selection of formatting options (bold, underlined, italic, link, blockquote, numerated list, bullet list). Now, I want to prevent users from bypassing these limitations by pasting formatted text (e.g. containing other text colors, monospace text, backgrounds, images) from a web page / document. How can I filter the text / content which is pasted into the quill editor in order to remove any other formatting options and elements apart from those stated above?

I am using Quill 1.3.1 with Angular.

[jonathanheron]

When you say you are including only a limited selection of formatting options, are you specifying a whitelist of formats in your editor options?

For example in my app I use these editor options:

{
  theme: 'snow',
  formats: [
    'bold',
    'header',
    'italic',
    'link',
    'list',
    'blockquote',
    'image',
    'indent'
  ],
  modules: {
    toolbar: [
      [{'header': 1}, {'header': 2}],
      ['bold', 'italic', 'link'],
      ['blockquote', {'list': 'ordered'}, {'list': 'bullet'}],
      ['image']
    ],
    clipboard: {
      matchVisual: false // https://quilljs.com/docs/modules/clipboard/#matchvisual
    }
  }
}

formats specifies a whitelist of formatting options/tags that can be used.

toolbar specifies which options appear on the toolbar.

matchVisual: false avoids Quill creating extra, empty lines if the source of the copy-paste includes a lot of padding before/after things like headings.

[Mushood]

if you landed here if you're using vue2-editor,
you need to pass the following object to your vue2-editor component as such:

                optionsEditor: {
                    formats: [
                        'bold','underline','italic'
                    ],
                },

Component:

<vue-editor
                                      v-model="body"
                                      :editorOptions="optionsEditor"
                              ></vue-editor>

[krisnaw]

@Mushood thanks for the tips

But it still will keep the format if it under the allowed tags.

For example we allow

tags. And under the

tags, there is a span tag with styles.

<p><span style="color:red">Text</span></p>

[koan00]

It looks like 'matchVisual: false' has been removed from the support docs. Is it still valid?
Edit: it's been removed from 2.0 documentation. Link to older version upgrade docs: https://github.com/quilljs/quill/blob/ee827ffb605ba491246f201d497ce0e7d9e193a0/docs/guides/upgrading-to-2-0.md#configuration