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.

Takeoff

Which module are you using? CKeditor or WYSIWYG? Do you allow <span> tag on your html text format (admin/config/content/formats) ?on "Limit allowed HTML tags" section? – Fontainebleau

as I noted above, I"m using the ckeditor. and on the text format page, I have allowed the span tag. I put it at the end of the list. should I put it first on the list of allowed tags? I don't understand the help note on that page about the order. – Takeoff

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;

Fontainebleau

+1 fixed my problem thanks! It was happening after I upgraded ckeditor to 4.3. And it was happening randomly(it was striping out inner elements). – Erde

(TheodorosPloumis) Sorry I didn't see this before, but YES, it did work. I'd upvote you if I could. But yes your answer worked for me. – Takeoff

@Fontainebleau config.allowedContent = true; worked for me! – Core

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!

Stanwinn

You're right, ckeditor removes not only the blank <span> s but entire sections if they contained the spans. Your solution works perfect, no idea what's behind the logic of taking code out this way... – Decarbonate

CKEditor remove any empty tags that are supposed to have content. See my answer for some reference. – Abmho

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.

Tweeter

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.

Abmho