CODEWITHSUNDEEP
javascriptquillreact-quill
kirill.buga
kirill.buga

Reputation: 1159

Is there any way to remove specific formatting in Quill?

Given Quill 1.3.6 and custom formatter in it, is there any way to programmatically remove all custom formatting from the whole editor? In another word is there any way to remove for example bold formatting from every place it occurs in the document?

quill.removeFormat() seems not the option since it doesn't give you a filter by format.

Any idea?

Upvotes: 1

Views: 5653

Answers (3)

quakes
quakes

Reputation: 451

If you pass false as the value argument to the format functions, you can remove a specific type of formatting.

E.g. format('bold', false) to remove bold from currently selected text (but no other formatting). Or formatText(0, 100, 'bold', false) to remove bold formatting for the first 100 characters.

This is specified in the API documentation (though it only appears for formatLine and formatText, it works for format too): https://quilljs.com/docs/api/#formatting

Upvotes: 4

kirill.buga
kirill.buga

Reputation: 1159

I was able to come up with such solution (which seems doesn't have great performance, but doing what I need).

const deltas = quill.getContents().map(delta => {
    const attributes = delta.attributes;
    if (attributes) {
        delete attributes['<YOUR ATTRIBUTE TO DELETE>'];
    }

    return delta;
});
quill.setContents(deltas);

Upvotes: 0

Samuel Kauffmann
Samuel Kauffmann

Reputation: 1

I'm doing a similar thing with the npm package sanitize-html.

An exemple for your use case :

import sanitizeHtml from 'sanitize-html';
const dirtyText = '<p>My <strong>dirty</strong> text</p>';
const cleanText = sanitizeHtml(dirtyText, {
  exclusiveFilter: (frame) => frame.tag !== 'strong'
});

otherwise, you can (I think it's better) list the tags you allow with the "allowedTags" property :

import sanitizeHtml from 'sanitize-html';
const dirtyText = '<p>My <strong>dirty</strong> text</p>';
const cleanText = sanitizeHtml(dirtyText, {
  allowedTags: ['span', 'p', 'h2', 'a', 'u', 'em', 's']
});

Upvotes: 0

Related Questions