#StackBounty: #ckeditor configuring CKEditor pasteFilter to strip out certain inline styles

Bounty: 50

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.

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.