Lost Formatting When Switching Between Source and WYSIWYG in CKEditor 4.2

advertisements

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.


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 &nbsp; 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