Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Glenn 28 posts 101 karma points
    Nov 28, 2014 @ 03:54
    Glenn
    0

    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  &nbsp;? 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 &nbsp; if they are empty. For example, "#p".
    ! Enables removal of elements with no attributes such as <span>. They can still have content though.
  • Glenn 28 posts 101 karma points
    Nov 28, 2014 @ 04:59
    Glenn
    0

    Ok, I seem to have solved. Not sure though which setting did it. But here are the differences.

    In umbracoSettings.config I had..

    <TidyEditorContent>False</TidyEditorContent>
    

    I have changed this to.. 

    <TidyEditorContent>True</TidyEditorContent>
    <TidyCharEncoding>False</TidyCharEncoding>

    Not sure why this fixed or what the effect is.. but there are no more nbsp; 's everywhere. 

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Nov 28, 2014 @ 06:26
    Jan Skovgaard
    0

    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

  • Glenn 28 posts 101 karma points
    Nov 30, 2014 @ 23:55
    Glenn
    0

    Fyi, This is what my HTML looked like. 

    <div class="dpg-banner">
        <div class="dpg-foreground"></div>
    </div>

    Yet it was being rendered like this.. 

    <div class="dpg-banner">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="dpg-foreground"></div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>

    But if I minified the html, it would render fine.. e.g. 

    <div class="dpg-banner"><div class="dpg-foreground"></div></div>
    
  • Glenn 28 posts 101 karma points
    Mar 17, 2015 @ 04:03
    Glenn
    0

    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

  • Glenn 28 posts 101 karma points
    Mar 20, 2015 @ 02:01
    Glenn
    0

    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..

    args.format = args.format || 'html';
    

    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.

    <config key="entity_encoding">raw</config>
    

    So Umbraco guys, where does umbraco set the config values?

  • Glenn 28 posts 101 karma points
    Mar 20, 2015 @ 02:35
    Glenn
    0

    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.

  • Glenn 28 posts 101 karma points
    Mar 26, 2015 @ 15:55
    Glenn
    2

    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({')

    enter image description here

    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.

  • Jamie Attwood 201 posts 493 karma points c-trib
    Apr 28, 2015 @ 22:03
    Jamie Attwood
    0

    Thanks for this fix. It worked. This issue has been driving me crazy!

    Jamie

  • Matthew Kirschner 323 posts 611 karma points
    Apr 29, 2015 @ 16:49
    Matthew Kirschner
    1

    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?

  • Matthew Kirschner 323 posts 611 karma points
    May 05, 2015 @ 20:18
    Matthew Kirschner
    0

    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.

  • Jamie Attwood 201 posts 493 karma points c-trib
    May 05, 2015 @ 20:54
    Jamie Attwood
    0

    I voted on that one.

    Thanks,

    Jamie

  • Safak Ulusoy 9 posts 29 karma points
    May 04, 2016 @ 17:53
    Safak Ulusoy
    0

    No easy solution yet...!

  • Safak Ulusoy 9 posts 29 karma points
    May 04, 2016 @ 18:07
    Safak Ulusoy
    0

    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.

Please Sign in or register to post replies

Write your reply to:

Draft