ckeditor strips <span> and style attributes

Question

I have a Drupal 7 site using ckeditor 4.2. I've created a basic page node and put a span inside an h2 heading in the body. I hard coded it in the html view. It looks fine but if I go back to edit the page, my has gotten stipped out of the html and also any style="" I've put into the html also. I've looked at the ckeditor config and text-formats. I've set the only formats allowed to be text and full html so I'm not using filtered at all. What gives? I've used the editor many times before but probably not this version.

Answer 1

If you are using the CKeditor module then there is an option in Advanced Options that is also mentioned in the module homepage where you should set:

config.allowedContent = true;

Answer 2

None of the above solutions worked for me. What I found was that CKEditor was removing empty <span> tags from the HTML. For example:

<div class="section-heading">
    <span class="sep-holder-l"><span class="sep-line"></span></span>
    <h4>Section Header</h4> 
    <span class="sep-holder-r"><span class="sep-line"></span></span>
</div>

Would yield:

<div class="section-heading">
    <h4>Section Header</h4> 
</div>

However, if I added a non-breaking space in the innermost <span>, CKEditor didn't edit the HTML:

<div class="section-heading">
    <span class="sep-holder-l"><span class="sep-line">&nbsp;</span></span>
    <h4>Section Header</h4> 
    <span class="sep-holder-r"><span class="sep-line">&nbsp;</span></span>
</div>

Hopefully that helps someone out there!

Answer 3

In Drupal 7 there's no automatic synchronization between CKEditor's filter (called the Advanced Content Filter) and Drupal's filter. As I understand you configured latter one, but not the first one. See config.extraAllowedContent.

Answer 4

CKEditor 4.+ will remove any empty tags it finds which are in CKEDITOR.dtd.$removeEmpty as part of the HTML parsing process. See this answer for a hack to avoid it.