CODEWITHSUNDEEP
ckeditor
user151841
user151841

Reputation: 18056

configuring CKEditor pasteFilter to strip out certain inline styles

My stakeholders are using CKEditor version 4.10.1 in Drupal (8.6.13).

They have a use case where they are often copying from Google Docs and pasting into the WYSIWYG textarea. Google uses inline css properties. Here's a sample:

<span style="font-size:36pt;font-family:Merriweather;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Your Name</span></p>

They often have to change the sizes of text, and also the font face. In the example above, these are font-size:36pt;font-family:Merriweather; in the style tag.

I am looking at the pasteFilter configuration directive. In the example, they show how to filter certain tags, and tags with certain attributes:

config.pasteFilter = 'h1 h2 p ul ol li; img[!src, alt]; a[!href]';

However, what I want to remove is just certain css styles. For instance, if the paste input is

 <span style="font-size:36pt;font-family:Merriweather;vertical-align:baseline;">Hello</span>

then I want the source to read

 <span style="vertical-align:baseline;">Hello</span>

I.e. only font-size:36pt;font-family:Merriweather; are removed. (And I want to remove any font-size and font-family specification.)

Is that possible with pasteFilter? If so, how do I express that?

Edit whitelist solutions don't meet our acceptance criteria, because my stakeholders want to preserve other directives, such as bold, italics, etc. We don't want to strip all the styling, or the entire span tag; we only want to remove font-size and font-family.

Upvotes: 1

Views: 1621

Answers (1)

Wizard
Wizard

Reputation: 3151

According to How to Allow Everything Except…, you can use:

config.allowedContent = {
    $1: {
        // Use the ability to specify elements as an object.
        elements: CKEDITOR.dtd,
        attributes: true,
        styles: true,
        classes: true
    }
};
config.disallowedContent = '*{font*}';
// if you want to be more specific: config.disallowedContent = 'span{font-size,font-family}';

I tested it and it works, see for yourself in this JSFiddle I've created.

Upvotes: 1

Related Questions