HTML not saved properly when using Editable Text webpart

Al LeMay asked on March 7, 2015 03:33

I have an editable text box on a page template. While on the Page view, I click in the box to activate the CK Editor. I then click the Source button and add the following text:

... <li><a class="rounded-x social_facebook" data-original-title="Facebook" href="#"></a></li> ...

I click OK, and save the changes. I open the Source again and find this:

... <li>NONBREAKINGSPACE</li> ...

It appears that the HTML has been stripped out when saving. I also notice that I cannot add a simple div tag with nothing in it:

... <div class="margin-bottom-20"></div> ...


... >div class="margin-bottom-20">NONBREAKINGSPACE</div> ...

This cause a huge problem in that a CSS class for line-height is now present on the div forcing it further down and creating more space than desired.

Why will the editor not just save the HTML I have entered instead of trying to "fix-it" for me?

Correct Answer

Cassandra Snyder answered on April 2, 2015 21:02

I ran into this recently when using the i tag for icon fonts, and the solution that worked for me was putting this code:

config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag

into the function in the config.js file. This:

CKEDITOR.dtd.$removeEmpty['i'] = false;

did not work for me. The solution I found came from here:

1 votesVote for this answer Unmark Correct answer

Recent Answers

Brenden Kehren answered on March 7, 2015 04:20

I asked a question like this a while back. Check it out. The config.js file is located in /CMSAdminFiles/CKEditor/config.js

1 votesVote for this answer Mark as a Correct answer

Andres Montenegro answered on July 13, 2015 16:35

Thanks Cassandra! Your solution using the config.js file works flawless. Regards!

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.