How to remove unwanted formatting in pasted text
zasunkx opened this issue · comments
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.
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.
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>
@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>
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