displaying HTML non-breaking space

12 posts, 0 answers
  1. Chris Sears
    Chris Sears avatar
    15 posts
    Member since:
    Jul 2006

    Posted 23 Apr 2008 Link to this post

    When the user types the space bar, RadEditor sometimes inserts a non-breaking space character ( ). This is great, but when switching to the HTML view, RadEditor displays   as normal spaces. There are times when you need to differentiate between a normal and non-breaking space and that now becomes very difficult to do.

    Would it be possible to add a property to enable/disable non-breaking space auto-conversion while in HTML mode? EnableHtmlNonBreakingSpaceConversion or something similar?
  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 24 Apr 2008 Link to this post

    Hello Chris,

    The addition of the   when pressing the space button more than once is a browser behavior. This is the entity that the browser uses to insert long intervals between the words in the web editors.

    If you want to strip automatically and programmatically the addition of &nbsp entities then you can implement a content filter that will remove these entities when switching to Html mode or submitting the content. Here is a basic example:

    <script type="text/javascript">
    function RadEditorCustomFilter()
    {
        this.GetHtmlContent = function (content)
    {
    re = /&nbsp;/gi  //search for &nbsp; entities in the content
    newContent = content.replace(re, "");  //and replace them
            return newContent;
    };
    }
    /* Use the editor onload function to register the filter with the FiltersManager */
    function onClientLoad (editor)
    {
        var customFilter = new RadEditorCustomFilter();
    editor.FiltersManager.Add(customFilter);
    }
    </script>
    <radE:RadEditor id="RadEditor1" OnClientLoad="onClientLoad" Runat="server"></radE:RadEditor>



    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris Sears
    Chris Sears avatar
    15 posts
    Member since:
    Jul 2006

    Posted 24 Apr 2008 Link to this post

    Hey Rumen,

    Thanks for the quick reply. I actually don't want to strip the characters. I just want to be able to see them when in HTML mode. In my opinion, HTML mode should display EXACTLY what is being stored. This actually goes beyond &nbsp; and includes all HTML special characters.

    If I look in my database and see that the text is saved as "<p>Here&nbsp;is&nbsps;some&nbsps;text</p>", I want this to be what I see in HTML mode within RadEditor. At the moment, I see "This is some text" because the &nbsp; characters are being displayed as spaces instead of being displayed literally. 

    So I guess the question is: why is RadEditor displaying special character codes as glyphs in HTML mode? Can this be disabled so we can see the actual text that will be stored in our database and output in our pages? 
  5. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 28 Apr 2008 Link to this post

    Hi Chris,

    The content displayed in HTML mode of RadEditor is identical to this one which is submitted to the server. In both cases the content is retrieved from Design mode trough the editor.get_html(true) method.

    If the content on the server looks different from this in HTML mode then this issue is not due to RadEditor.
    For example it could be a browser specific issue - the empty spaced are saved by some browsers like &nbsp; and by others like other spaces. The problem could appear if you save the content from some browser and load it in another one.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. leapopotomus
    leapopotomus avatar
    10 posts
    Member since:
    Dec 2007

    Posted 29 May 2008 Link to this post

    I had a different problem where i would get question mark characters (?) in place of where there were spaces after saving the html. It was caused because i was saving the html as ASCII instead of UTF-8.

    My problem and your problem are probably both caused when using the Editor in IE.

    IE will store non breaking spaces as unicode character U+C2A0 and not as &nbsp; like FF does.

    In the case where the HTML is displayed in a different encoding to UTF-8 this can lead to strange characters appearing like  (or in my case ?).

    I solved my problem by saving the html as UTF-8 but I guess the solution to make &nbsp; appear instead of U+C2A0 would be to apply a filter that converts U+C2A0 to &nbsp;



  7. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 09 Aug 2009 Link to this post

    Hello,

    I am also having trouble persisting the &nbsp; entity in IE8. I'm using 2009.2.701.35.

    In particular, I use the following to break up sections in long documents:

    <p>...conclusion of last section.<p> 
    <p>&nbsp;</p> 
    <h2>Next Section</h2> 

    In Design mode of the editor, you can get the <p>&nbsp;</p> by hitting enter to create a blank line. When you first switch to HTML mode, the &nbsp; is there. Switch back to Design then back to HTML and the &nbsp; is replaced by an actual space (ASCII 32).

    This seems like a bug to me. Even if it isn't, I still would like to come up with a workaround for this.

    Like Chris, it is extremely important for me to preserve these entities.

    This problem is reproducible without round trips to the server and without cutting and pasting text from anywhere. The Editor creates the &nbsp; and it takes it away.

    Any ideas?

    Thanks,
    Jeff


  8. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 11 Aug 2009 Link to this post

    Hi Jeff,

    Please, try the following custom content filter that should replace the empty space symbol with &nbsp; inside the <p> <p> tags:

    <telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"
    <Content> 
        <p>...conclusion of last section.</p>  
        <p>&nbsp;</p>  
        <h2>Next Section</h2> 
    </Content> 
    </telerik:radeditor>  
    <script type="text/javascript">     
        function OnClientLoad(editor, args)     
        {     
           editor.get_filtersManager().add(new RadEditorCustomFilter());     
        }     
        RadEditorCustomFilter = function()     
        {     
           RadEditorCustomFilter.initializeBase(this);     
           this.set_isDom(false);     
           this.set_enabled(true);     
           this.set_name("RadEditor filter");     
           this.set_description("RadEditor filter description");     
        }     
        RadEditorCustomFilter.prototype =     
        {     
           getHtmlContent : function(content)     
           {     
                //Make changes to the content and return it     
                content = content.replace(/ /gi, "&nbsp;"
                return content;     
           }   
        }     
        RadEditorCustomFilter.registerClass('RadEditorCustomFilter', Telerik.Web.UI.Editor.Filter);     
    </script>   

    Feel free to enhance the filter to fit your scenario.

    All the best,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 11 Aug 2009 Link to this post

    Hi Rumen,

    It was a good attempt but it doesn't work.

    In IE, it does nothing. Closer inspection reveals that these aren't space characters (ASCII code 32). I'm not sure what they are. I just see a square box (unprintable character) when I do a Quick Watch in VS2008.

    Can you try and reproduce this problem. I'm even more convinced that this is a bug.

    Here are the steps (IE 8 only):
    1. Type a paragraph of text
    2. Create a blank line
    3. Create another line of text
    4. Switch to HTML mode. Everything looks great: The blank line reads <p>&nbsp;</p>
    5. Switch to Design mode
    6. Switch to HTML mode: The blank line is now <p>[funny unprintable character]</p>

    Beyond that, the filter you provided is too aggressive- every space character is turned into an &nbsp;. I'm really looking for this in two cases:
    1. On a blank line
    2. When there is more than one space character in a row, the extra spaces should be &nbsp;.

    Thanks for your help.

    Jeff
  10. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 13 Aug 2009 Link to this post

    Hello Jeff,

    The &nbsp; is not replaced by space (ASCII 32) but by a non-breaking space. Both spaces look identically, but actually this is not a normal space.

    My suggestion is to replace the normal spaces with non breaking spaces on the server using a simple Stripng.Replace method, e.g.

    TextBox1.Text = RadEditor1.Content.Replace("\xA0", "&nbsp;").Replace("\x20","&nbsp;");

    You can find more information here.

    All the best,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  11. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 17 Aug 2009 Link to this post

    That's absolutely what I'm seeing: it's a hex A0 Unicode character.

    While I would still prefer to have the &nbsp; character entity, the A0 character does have the same effect as the &nbsp; in all of the browsers I've tested: IE, Firefox and WebKit.

    The <p>0xA0</p> does result in a blank line, which is what I'm looking for.

    I hope a future version of the controls will catch the A0 character and convert it to &nbsp;. But I can live with the current behavior.

    Thanks again.

    Jeff
  12. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 18 Aug 2009 Link to this post

    For anyone else who is as picky as me about proper HTML, I came up with a RegEx to replace the non-breaking space Unicode character (hex A0) with the &nbsp; entity.

    The RegEx looks like this:

            content = content.replace(/\xA0/gi, "&nbsp;");


    Here's Rumen's filter example with the new RegEx:

    <telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">  
    <Content>  
        <p>...conclusion of last section.</p>   
        <p>&nbsp;</p>   
        <h2>Next Section</h2>  
    </Content>  
    </telerik:radeditor>   
    <script type="text/javascript">      
        function OnClientLoad(editor, args)      
        {      
           editor.get_filtersManager().add(new RadEditorCustomFilter());      
        }      
        RadEditorCustomFilter = function()      
        {      
           RadEditorCustomFilter.initializeBase(this);      
           this.set_isDom(false);      
           this.set_enabled(true);      
           this.set_name("RadEditor filter");      
           this.set_description("RadEditor filter description");      
        }      
        RadEditorCustomFilter.prototype =      
        {      
           getHtmlContent : function(content)      
           {      
                //Make changes to the content and return it      
                content = content.replace(/\xA0/gi, "&nbsp;"); 
                return content;      
           }    
        }      
        RadEditorCustomFilter.registerClass('RadEditorCustomFilter', Telerik.Web.UI.Editor.Filter);      
    </script> 

    I hope that helps someone out there!

  13. D Strube
    D Strube avatar
    1 posts
    Member since:
    Dec 2009

    Posted 23 Dec 2009 Link to this post

    Dear Rumen,
    This is exactly what I was looking for. Thank you!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017