Bootstrap Glyphicons getting stripped out because of Empty span

Aug 14, 2015 at 3:14 PM
I can't add bootstrap glyphicons like the following because the editor strips out empty html elements. Is there a way to prevent the editor from stripping them out?
<a class="btn btn-default" href="LINK">
  <span class="glyphicon glyphicon-download"></span> Download
</a>
Aug 14, 2015 at 4:26 PM
I found a work around here, but man was it a pain.
You can easily add following to a custom js file.:
CKEDITOR.dtd.$removeEmpty['span'] = false;
However, getting that into this provider was the pain. You must use the DNN File Manager to upload a .js file.
However, before you can do that you have to allow .js extension to be uploaded.
You then have to go to the bottom of CKEditor Provider Config Manager and select the js file you previously uploaded and then save.
Then can go back and remove .js from allowed uploads.

However, each time you go back to the CKEditor Provider Config Manager page, the File is not selected (the folder will be selected but it will show no files).
You have to change the folder to a different one, then go back to your folder previously selected and you'll see your file again.

Painful...
Coordinator
Aug 15, 2015 at 9:50 PM
Simply add those empty span tags to the protectedSource Setting under the Editor Config Tab in the Editor Settings
[( /<span class[\s\S]*?>[\s\S]*?<\/span>/gi )]
Sep 8, 2015 at 9:11 PM
I'm confused as to what the exact syntax would be. Could you show me specifically?

Here is the existing Protected Source:

[( /<i class[\s\S]*?>[\s\S]*?<\/i>/gi ),( /<span class[\s\S]*?>[\s\S]*?<\/span>/gi ),( /<em class[\s\S]*?>[\s\S]*?<\/em>/gi ),( /<button class[\s\S]*?>[\s\S]*?<\/button>/gi )]

Here is example html that i would use for my Bootstrap Glyph Icons:
<div class="Social-Links clearafter"> <a class="iconFacebook" title="Facebook" href="#"></a> <a class="iconTwitter" title="Twitter" href="#"></a> <a class="iconForrst" title="Forrst" href="#"></a> <a class="iconDribbble" title="Dribbble" href="#"></a> </div> Could you please reply with what I should add to this Protected Source area of the Editor Config?

Thank you very much for any help.
Coordinator
Sep 22, 2015 at 10:02 AM
In your case you need to add this...
[( /<i class[\s\S]*?>[\s\S]*?<\/i>/gi ),( /<span class[\s\S]*?>[\s\S]*?<\/span>/gi ),( /<em class[\s\S]*?>[\s\S]*?<\/em>/gi ),( /<button class[\s\S]*?>[\s\S]*?<\/button>/gi ),( /<a class[\s\S]*?>[\s\S]*?<\/a>/gi )] 
Sep 22, 2015 at 2:42 PM
Should I paste over my existing code with this new code? Or should I keep my existing code and add this to the end of it? Thanks.
Coordinator
Sep 22, 2015 at 4:06 PM
dgambino wrote:
Should I paste over my existing code with this new code? Or should I keep my existing code and add this to the end of it? Thanks.
Yes simply replace the existing code