Losing formatting when switching between Source and WYSIWYG in CKEditor 4.2

Question

I am using CKEditor version 4.2.2 Drupal module. When I toggle the 'Source' button (swithing between Plain Text and Rich Text) I end up losing some tags. It seems that the CKEditor rewrites the HTML code. I did quite a bit of search so far about this and I added in the "Custom JavaScript configuration" (in the configuration section of the CKEditor module), this line of code:

config.allowedContent = true;

With the above code I had partial success, now it leaves alone more tags but for the following code:

<h2>404<i class="icon-file"></i></h2>

CKEditor rewrites it as:

<h2>404</h2>

It removes the empty i tags. The i tag above is for font icons.

How can I prevent CKEditor from rewriting the Markup when switching between Source View and WYSIWYG view?

The problem I have is that multiple users edit the same document and some use WYSIWYG editor while others use the Plain text view. And you see how things get messy.

Thanks.

Answer 1

The tag <i> already has a historical semantic meaning as italic text. There's no real point in using it for an icon. Use some other tag and it'll be easier.

CKE automatically strips empty <i>, <b>, <span> and such. You can go around this, see this question: CKEditor strips <i> Tag But I don't recommend it. Wouldn't some other approach be nicer and more natural, like using an <img>? Or maybe even better, adding a class directly to the H2 element and using some CSS/JS to get the desired result?

For the BOFH option, teach your users to input   into the element like this: <i>&nbps;</i> - and the element will stay in place. Horrible option, don't do it.

Also related: ckeditor removing empty span automatically

Answer 2

Try to use config.fillEmptyBlocks = false; in ckeditor config file. This option tells CKeditor to not fill empty tags with  . But it'll probably force ckeditor to not affect empty tags at all.