CKEditor strips out inline CSS

I agree that this is a problem.

Correct me if I am wrong (I am not a developer for this project) but I suspect this is a problem with ckeditor itself and not the ckeditor module.

Please look into ckeditor profile, section Security filters, please uncheck them and check the results. I haven't any problems with adding custom styles and div elements.

I had a similar problem. First all my custom div elements worked and then they suddenly disappeared and didn't show up in the view source of the output page.

Go into Site Configuration/Input Formats/ and set the option to "Full HTML".

Click on the "configure" link for "Full HTML" and uncheck the HTML corrector and HTML Filter.

That fixed the problem for me.

I am having the same issue, having unchecked everything that has been suggested. My css looks great as long as I save the block and don't go back to it, but if I go back to edit all my code is lost.

Was a fix ever found for this?

same problem.

I am using Ckeditor version 7.x-1.9, which has problem with inline style. While I create a node and apply style to its content using Filter HTML, it works but while I do Edit, the style stripped out. To resolve that I apply for

config.allowedContent = true;

but that doesn’t fix the problem. Similar way

allowedContent: ' img(*)', allowedContent: '* img[]' , allowedContent = 'img[!src,alt,width,height,style]', ' img([src|alt|style)'

doesn’t help to fix the issue.
While I am adding HTMLPurifier module, that too not resolve the problem. The default "filter_html" filter that means ckeditor_filter_xss() is called in ajax when you load the /edit page and delete the "style" attribute from content.
Upgrade to 7.x-1.13, make the editor front end blank.
Is there any patch available to fix the same ?

Still not working for me either....did you guys find a solution?

Can someone explain where is the fix?

I thought that CKeditor was now a pretty common module in Drupal installations. However, when I simply insert an image in the body of a node using left or right alignment, and other style attributes which are presented in the image plugin, the style gets stripped out of the element when I save the node. I would have thought that by now (this problem was first reported FIVE YEARS ago) this would have been addressed in a way that does not require Drupal admins to poke around in files or go deep into the bowels of CKEditor configuration to fix this.

Or at the very least, that the solution would be readily available to anybody who searches for "CKEditor strips out inline CSS". It is mind boggling that the editor strips out HTML that it placed in the content itself. Or maybe I am missing some kind of quantum leap?

This problem is happening to me today - I am losing all inline styles when saving content using the Full HTML format.

I have active filters "Convert URLs into links", "Convert line breaks into HTML" and "Correct faulty and chopped off HTML"

The HTML I am using is correct and works in the browser when saving without the CKeditor enabled.

I see no comment about how or where this was fixed. Disabling the HTML correction filter is a workaround only not a fix.

If it is a problem with the CKeditor itself and not the Drupal module then this needs to be stated somewhere in the comments and the bug closed as "works as designed" or something rather than "fixed".

Thank you.

I would guess that the new Advanced Content Filter is the cause. If you want to allow inline styles you will need to disable this. Basically you add the following in the CKeditor options under Custom Javascript Configuration
config.allowedContent=true;

If I'm mistaken please feel free to reopen this.

@Presleyd: You are correct. Thanks!

I fixed this in the ckeditor profile settings.

Under Cleanup & Output change Use Custom Formatting Options to "Yes".

For anyone who want to keep the original HTML code when editing content.

There are a two settings which will affect the "strip HTML".

1. The CKEditor ACF(Advanced Content Filter)
You can disable it by going to admin/config/content/ckeditor/edit/your_profile, under "Advanced Content Filter" section

As I know, this is same as setting
config.allowedContent=true;
under the "Custom JavaScript configuration" section

2. The XSS filter
In the ckeditor module, /ckeditor/includes/ckeditor.utils.js, has a Drupal.ckeditorOn() function which accept a 'run_filter' parameter. It is a AJAX call to run the Drupal xss_filter() function to remove disallowed HTML code.

The HTML code in the textarea is stripped BEFORE the ACF above and you may wonder why config.allowedContent has no effect.

To fix this, you may uncheck the "Limit allowed HTML tag". Or, in a more proper way, install other HTML filter and white list with your own setting.

For more information:

CKEditor removes the "style" attribute
https://www.drupal.org/node/2510970#comment-10068192

Option to disable AJAX xss filter
https://www.drupal.org/node/2000712#comment-7732235

My solution that is kind of like a hack but works perfectly, simply paste the code in php text format, only problem is that you can't revert to original text if you switch back to Full Html, so no preview option...

What I did is create an extra field, one PHP and one HTML, I use the one that breaks the code for preview and keep the other one intact for editing.