When copying text from the web and pasting it into ckeditor, how can I prevent it from applying its own inline css?

Below is a mild example of what can happen.

Text being copied

<p><strong><span class="Apple-style-span" style="font-weight:normal;">On 15 February 2011, the Guardian reported that Rafid Ahmed Alwan al-Janabi, code-named 'Curveball' by U.S. intelligence officials, admitted to fabricating knowledge of Saddam Hussein's alleged biological weapons program.&nbsp; Despite clear warnings from CIA officials, the Bush administration used Mr. Janabi's information in public statements and reports to Congress that influenced its vote to authorize military force against Iraq.&nbsp;</span></strong></p>

Text after being pasted into ckeditor

<p><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: 700; ">On 15 February 2011, the Guardian reported that Rafid Ahmed Alwan al-Janabi, code-named &#39;Curveball&#39; by U.S. intelligence officials, admitted to fabricating knowledge of Saddam Hussein&#39;s alleged biological weapons program.&nbsp; Despite clear warnings from CIA officials, the Bush administration used Mr. Janabi&#39;s information in public statements and reports to Congress that influenced its vote to authorize military force against Iraq.&nbsp;</strong></p>

Comments

bryancasler’s picture

bryancasler CreditAttribution: bryancasler commented

Here is a better example where you can see the insane amount of CSS that is added. I've copied this text directly from inside the editor itself.

Text being copied from ckeditor

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl purus, euismod vel sollicitudin eu, porttitor lacinia leo.Quisque fringilla viverra justo, eget ultricies libero lobortis eget. Donec elit metus, gravida non convallis a, pharetra non arcu. Ut fermentum nisi quis tortor tincidunt posuere. Cras tristique convallis arcu nec euismod. Nulla orci risus, rutrum id porta sed, tempus fringilla eros. Suspendisse potenti. Mauris euismod, est lobortis dapibus consequat, orci lorem ultrices elit, eget faucibus odio nulla ac mauris. Etiam purus mi, convallis in sodales in, porta eget metus. Curabitur commodo consequat magna, in sollicitudin tortor ultrices non. In dignissim sollicitudin auctor. Cras id eros metus. Nullam eu est malesuada orci tincidu.</p>

Text after pasted into ckeditor

<div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; color: rgb(0, 0, 0); background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); font: normal normal normal 81.3%/1.538em 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-family: 'Times New Roman'; line-height: normal; font-size: medium; "><p style="margin-top: 1em; margin-right: 0px; margin-bottom: 1em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; vertical-align: baseline; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl purus, euismod vel sollicitudin eu, porttitor lacinia leo.Quisque fringilla viverra justo, eget ultricies libero lobortis eget. Donec elit metus, gravida non convallis a, pharetra non arcu. Ut fermentum nisi quis tortor tincidunt posuere. Cras tristique convallis arcu nec euismod. Nulla orci risus, rutrum id porta sed, tempus fringilla eros. Suspendisse potenti. Mauris euismod, est lobortis dapibus consequat, orci lorem ultrices elit, eget faucibus odio nulla ac mauris. Etiam purus mi, convallis in sodales in, porta eget metus. Curabitur commodo consequat magna, in sollicitudin tortor ultrices non. In dignissim sollicitudin auctor. Cras id eros metus. Nullam eu est malesuada orci tincidu.</p></div>
TwoD’s picture

TwoD
Primary language Swedish
Location Sweden
CreditAttribution: TwoD commented
Title: CKEditor is adding a crap ton on inline css styles » WebKit is adding a crap ton on inline css styles
Status: Active » Closed (won't fix)

This is not a bug in Wysiwyg module, and also not in CKEditor (though they might be able to filter it out).
It's a WebKit problem that can be reproduced with a simple div with contenteditable=true: http://stackoverflow.com/questions/3306205/how-to-avoid-webkit-contented...

Found these bug reports which seem related to this:
https://bugs.webkit.org/show_bug.cgi?id=26937
https://bugs.webkit.org/show_bug.cgi?id=25006.

bryancasler’s picture

bryancasler CreditAttribution: bryancasler commented

Made this temporary work around to cleanup the output.

jQuery(document).ready(function($){

	//Strips all inline CSS from all <p> tags in the body field.
	$('.field-type-text-with-summary p').each(function() {
		$(this).removeAttr("style")
	});

});
bryancasler’s picture

bryancasler CreditAttribution: bryancasler commented

I've also found enabling "Limit allowed HTML tags" on my "Text formats" page works to strip out inline CSS from being displayed.

TwoD’s picture

TwoD
Primary language Swedish
Location Sweden
CreditAttribution: TwoD commented

Yes, just remember that'll also remove any styling added by the editor for things like backround/foreground-color etc.
You might want to try the WYSIWYG FIlter module, it allows for much greater control over what tags and styles are filtered out.