Umbraco and TinyMce Richtext editor adding in to replace whitespace
Hi All,
Having a serious problem with content where the HTML is nicelly formatted. Umbraco is adding in a whole bunch of " " to replace white space. If I use a minifiy tool and then paste the html back into tinyMce Richtext editor it works fine. But as soon as the content is re-rendered by the richtext editor, it formats the html for readability again. If without saving the content or even touching the page I then resave.. a while bunch of nbsp; are added all over the content.
Now.. this may have to do with my tinyMceConfig.config.
This is what my validemements element looks like in the config. Is the problem perhaps there somewhere?
<validElements> <![CDATA[*[*]]]> </validElements>
When reading this page I see that "#" symbol seem to pad with ? any ideas?
+
Makes the element open if no child nodes exists. For example, "+a".
-
Enables removal of empty elements such as <strong />. For example, "-strong".
#
Enables padding of empty elements. This will pad with if they are empty. For example, "#p".
!
Enables removal of elements with no attributes such as <span>. They can still have content though.
What kind of HTML are you saving in the RTE field? Tidy makes sure to clean up tags etc. which are not allowed it it's set to true and allows for everything else if it's set to false.
So I guess it's tidy making sure everything is fine and that it's because your content is saved into a CDATA section in the umbraco.config file.
Hope this explains things and good that you got it solved btw :)
After I run it through the minfier and ensure there are no "non breaking spaces". And save it looks fine. However if I then come back to edit that page later. I load up the page. TinyMce formats the source as it wants to.. and if I then save again (this is without touching any code or making any changes).. bamm.. I have a whole bunch of " " back in my html.
ok, so I am one step more forward... if I take all the raw code downloaded from tinymce and try use the source code editor then select ok. It is now exhibiting the expected behavior. i.e It has replaced non-breaking whitespace between html with "", not " ".
Hopefully my next post will be marked as resolved.
Wow, what a pain in the ^%$^*. So I thought surely this must be solved for some other people and hence decided to upgrade. I got the latest version of umbraco 7 (7.2.4). This also did not solve.
THE FOLLOWING SOLUTION DOES NOT REQUIRE YOU TO UPGRADE. YOU JUST SHOULD HAVE VERSION 7+.
I would have attached the fixed tinymce.min.js, but I could not attached a js file.
ok, so now I was forced to debug tinymce.min.js ([YOURSITEROOT]/Umbraco/lib/tinymce/tinymce.min.js). With it being minified. I went forth and downloaded the un-minified version of TinyMce. According to the minified version of tinymce this was version (4.0.11).
Copy the souce from this file into your [YOURSITEROOT]/Umbraco/lib/tinymce/tinymce.min.js.
Go to line 25585. And add the following line in..(OR SEARCH FOR 'self.settings = settings = extend({')
Don't ask me why. But for some reason the settings.skin which really is just css link if you look at the resources being loaded is causing this issue. I have tested the media insert and link functionality and this all works fine after this change. It even looks the same. Issue resolved.
I've just implemented this fix (so easy!) but haven't yet tested. If this works, @Glenn, you are my hero. This has been one of those bugs with the RTE that surprises me every time a new update hits and the issue is still there.
I think the easiest solution is replacing the ((char)160) when outputting in Mvc. ((char)160) is ascii nbsp character. It worked for me without hassle.
Other solutions require some effort or dont work for some versions.
Umbraco and TinyMce Richtext editor adding in to replace whitespace
Hi All,
Having a serious problem with content where the HTML is nicelly formatted. Umbraco is adding in a whole bunch of " " to replace white space. If I use a minifiy tool and then paste the html back into tinyMce Richtext editor it works fine. But as soon as the content is re-rendered by the richtext editor, it formats the html for readability again. If without saving the content or even touching the page I then resave.. a while bunch of nbsp; are added all over the content.
Now.. this may have to do with my tinyMceConfig.config.
This is what my validemements element looks like in the config. Is the problem perhaps there somewhere?
When reading this page I see that "#" symbol seem to pad with ? any ideas?
Ok, I seem to have solved. Not sure though which setting did it. But here are the differences.
In umbracoSettings.config I had..
I have changed this to..
Not sure why this fixed or what the effect is.. but there are no more nbsp; 's everywhere.
Hi Glenn
What kind of HTML are you saving in the RTE field? Tidy makes sure to clean up tags etc. which are not allowed it it's set to true and allows for everything else if it's set to false.
So I guess it's tidy making sure everything is fine and that it's because your content is saved into a CDATA section in the umbraco.config file.
Hope this explains things and good that you got it solved btw :)
/Jan
Fyi, This is what my HTML looked like.
Yet it was being rendered like this..
But if I minified the html, it would render fine.. e.g.
I am still having this issue,
What I have resorted to doing it putting my html through a minifier e.g. http://willpeavy.com/minifier/
After I run it through the minfier and ensure there are no "non breaking spaces". And save it looks fine. However if I then come back to edit that page later. I load up the page. TinyMce formats the source as it wants to.. and if I then save again (this is without touching any code or making any changes).. bamm.. I have a whole bunch of " " back in my html.
http://stackoverflow.com/questions/27791824/tinymce-adding-nbsp
So I decided to start trying to debug the tinymce.min.js.
To do this I downloaded the unminified version from tinymce.
What I am seeing is that there is allot of this..
Where format is showing as undefined. Perhaps this is where the issue is.. as in my tinyMceConfig.config file I am setting the encoding to raw.
So Umbraco guys, where does umbraco set the config values?
ok, so I am one step more forward... if I take all the raw code downloaded from tinymce and try use the source code editor then select ok. It is now exhibiting the expected behavior. i.e It has replaced non-breaking whitespace between html with "", not " ".
Hopefully my next post will be marked as resolved.
Wow, what a pain in the ^%$^*. So I thought surely this must be solved for some other people and hence decided to upgrade. I got the latest version of umbraco 7 (7.2.4). This also did not solve.
THE FOLLOWING SOLUTION DOES NOT REQUIRE YOU TO UPGRADE. YOU JUST SHOULD HAVE VERSION 7+.
I would have attached the fixed tinymce.min.js, but I could not attached a js file.
ok, so now I was forced to debug tinymce.min.js ([YOURSITEROOT]/Umbraco/lib/tinymce/tinymce.min.js). With it being minified. I went forth and downloaded the un-minified version of TinyMce. According to the minified version of tinymce this was version (4.0.11).
You can download the entire package here. http://www.tinymce.com/download/older.php. After downloading.. find /tinymce/js/tinymce/tinymce.js.
Copy the souce from this file into your [YOURSITEROOT]/Umbraco/lib/tinymce/tinymce.min.js.
Go to line 25585. And add the following line in..(OR SEARCH FOR 'self.settings = settings = extend({')
Don't ask me why. But for some reason the settings.skin which really is just css link if you look at the resources being loaded is causing this issue. I have tested the media insert and link functionality and this all works fine after this change. It even looks the same. Issue resolved.
Thanks for this fix. It worked. This issue has been driving me crazy!
Jamie
I've just implemented this fix (so easy!) but haven't yet tested. If this works, @Glenn, you are my hero. This has been one of those bugs with the RTE that surprises me every time a new update hits and the issue is still there.
So, Umbraco, how about that TinyMCE update?
I didn't see this issue posted on the issue tracker so I added it myself. Please vote for it so we could see the issue resolved.
I voted on that one.
Thanks,
Jamie
No easy solution yet...!
I think the easiest solution is replacing the ((char)160) when outputting in Mvc. ((char)160) is ascii nbsp character. It worked for me without hassle.
Other solutions require some effort or dont work for some versions.
is working on a reply...