displaying HTML non-breaking space

[Chris Sears]

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?

[Rumen]

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

[Chris Sears]

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? 

[Rumen]

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

[leapopotomus]

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;

[Jeff]

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

[Rumen]

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.

[Jeff]

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

[Rumen]

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.

[Jeff]

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

[Jeff]

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!

[D Strube]

Dear Rumen,
This is exactly what I was looking for. Thank you!