Make sure you add a blank space ( ) inside your span or other tag to force TinyMCE keep your content.
It shouldn't break your layout as the icon usually takes more pixels than an empty space (double check your font-size, line-height etc. though) and you'll live happily ever after :)
You can has Alain suggests use span tags instead of the i tag for font awesome, but if you tweak your tinymce valid elements to be:
-em[class|style],#i[class|style],
eg as you had it before but with a # infront of the i instead of a -, this tells tinymce that it is ok to have empty elements for this tag.
The problem you had before was that even though you had allowed i tags to be used in tinymce, when they had no content (which is always the case when you are using them for font awesome ) then tinymce was stripping them out for being empty!
I just tried the #i solution that marc posted and it works perfect for me. (Wierd coincidence that I needed exact this fix and it was the top post on our.umbraco since you commented it) :)
However, the changes will not take affect directly without bumping the client dependency version number.
You do that by opening the file /Config/ClientDependecy.config and increase the clientDependecy version by 1. That will force Umbraco to clear cache and thereby read your new tinyMce settings.
Hope it works out for you! Otherwise i´ll pull the "works on my machine"-card! :)
Richtext editor removing <i> tag for font-awesome
Hi everyone =D
I am trying to add some html in a RTE I have in Grid, but TinyMCE keeps removing it. It doesn't work on a regular RTE, as part of a doctype, either
I already tried adding the i tag in tinyMceConfig like
Maybe there is something obvious that I'm missing or that I did wrong Does anyone have any ideas?
Thanks!!
Adriana
I had the same issue and dirty fixed it by setting the font awesome class to another tag instead of using an i tag :
Make sure you add a blank space (
) inside your span or other tag to force TinyMCE keep your content.It shouldn't break your layout as the icon usually takes more pixels than an empty space (double check your font-size, line-height etc. though) and you'll live happily ever after :)
Thanks Alain! it worked!!!
Hi Adriana
You can has Alain suggests use span tags instead of the i tag for font awesome, but if you tweak your tinymce valid elements to be:
eg as you had it before but with a # infront of the i instead of a -, this tells tinymce that it is ok to have empty elements for this tag.
The problem you had before was that even though you had allowed i tags to be used in tinymce, when they had no content (which is always the case when you are using them for font awesome ) then tinymce was stripping them out for being empty!
regards
Marc
Hi Marc,
Thanks for the tip. I did it, but it still doesn't work. For some reason, if it's empty it just deletes the i tag.
Regards.
Hi Adriana.
I just tried the #i solution that marc posted and it works perfect for me. (Wierd coincidence that I needed exact this fix and it was the top post on our.umbraco since you commented it) :)
However, the changes will not take affect directly without bumping the client dependency version number.
You do that by opening the file /Config/ClientDependecy.config and increase the clientDependecy version by 1. That will force Umbraco to clear cache and thereby read your new tinyMce settings.
Hope it works out for you! Otherwise i´ll pull the "works on my machine"-card! :)
Thanks! That made it work =D
So the two versions work now, cool!
Awesome, glad it worked out for you!! :)
is working on a reply...