1

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.

Boutros AbiChedid
  • 121
  • 9
  • The tag `` already has a historical semantic meaning as "italic". There's no real point in using it for an icon. Use some other tag and it'll be nicer. – Joel Peltonen Nov 12 '13 at 12:49
  • possible duplicate of [CKeditor strips Tag](http://stackoverflow.com/questions/18250404/ckeditor-strips-i-tag) – AlfonsoML Nov 12 '13 at 14:32

2 Answers2

0

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

Community
  • 1
  • 1
Joel Peltonen
  • 13,025
  • 6
  • 64
  • 100
  • 1
    Thanks Nenotlep for directing me to the right answer. To recap: I am using Font-Awesome, and I want to prevent the CKEditor 4.2 from removing the tag. Here is the original solution: https://drupal.org/node/1908696 It works great for me. – Boutros AbiChedid Nov 12 '13 at 15:16
0

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

remort
  • 304
  • 3
  • 9