[Solved] Behavior difference in FireFox vs IE 8

[Unified Development]

I need to get this fixed or maybe someone has a work around that will help us complete the implementation of the Telerik Editor.

Here is the problem. I want to use the editor as a WYSIWYG editor. Additionally, I want the editor to inherit the specified styles of the website and thus when a user begins typing into the editor the font and style of their text matches that of the website. I have a test URL where you can see the difference in behavior -- http://editortest.dev1.thenetimpact.com/

Here is what is wrong. In IE, pull up the above link. Simply click in the text area and type "This is a test". Now, click on the HTML view at the bottom of the editor. You should see this:

<p>This is a test</p>

Now, pull up the above site in FireFox and do the exact same thing, this is what you will see:

<p></p>
This is a test<br />

Notice how in FF the text you type in is outside of the Paragraph tags. This is a problem because the styles are at the P level (on purpose) and thus if you look at them side by side you will see that the font is rendered differently in IE versus FF.

I can't believe I am going to say this but in this case I need FF to act more like IE because IE is in this case behaving as I believe to be correct. What is odd is in FF if you hit enter after the text, it will then wrap the text you typed in inside a new <P> block. Again, I think this is wrong because what happens then is additional white space is added to the top whereas in IE the initial text is simply dropped inside the first applied <P> tag.

Any ideas on how to get the initially typed text in FF to fall within the initial <P> tags like IE is doing?

I am using IE version 8.0.6001.18702 and FF version 3.5.5

Also, here is the code that is currently initializing the editor:

String[] imagePath = new String[1];
        String cssPath;

        protected void Page_Init(object sender, EventArgs e)
        {
            imagePath[0] = "~/Files/image";
            cssPath = "~/css/content.css";

            radeTest.CssFiles.Add(cssPath);

            radeTest.NewLineBr = false;
            radeTest.Content = "<p></p>";
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            radeTest.SetPaths(imagePath, EditorFileTypes.Images, EditorFileOptions.All);
            radeTest.SetPaths(imagePath, EditorFileTypes.Documents, EditorFileOptions.All);
            radeTest.SetPaths(imagePath, EditorFileTypes.Flash, EditorFileOptions.All);
            radeTest.SetPaths(imagePath, EditorFileTypes.Media, EditorFileOptions.All);
            radeTest.SetPaths(imagePath, EditorFileTypes.Template, EditorFileOptions.All);
           
            radeTest.ContentFilters = EditorFilters.FixUlBoldItalic | EditorFilters.IECleanAnchors | EditorFilters.MozEmStrong | EditorFilters.ConvertFontToSpan | EditorFilters.ConvertToXhtml | EditorFilters.IndentHTMLContent;
        }


Thank you,
Derek Bemis

[Dobromir]

Hi Derek,

The reason for this behavior is that in some browsers (Firefox for instance) the empty blocks are not rendered in design mode, and therefore cannot be selected. The most simple solution to this is to have <p>&nbsp;</p> as an initial content.

Another solution to this might be a Custom content filter which wraps the content with <P> tag if one is not present, e.g

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script type="text/javascript">
function OnClientLoad(editor, args)
{
   editor.get_filtersManager().add(new MyFilter());
}
MyFilter = function()
{
   MyFilter.initializeBase(this);
   this.set_isDom(false);
   this.set_enabled(true);
   this.set_name("RadEditor filter");
   this.set_description("RadEditor filter description");
}
MyFilter.prototype =
{
    getHtmlContent: function(content) {
        var newContent = !content.match(/<p>(.*)<\/p>\/n/gi) ? "<p>" + content + "</p>" : content;
        return newContent;
    },
    getDesignContent: function(content) {
        var newContent = !content.match(/<p>(.*)<\/p>\/n/gi) ? "<p>" + content + "</p>" : content;
        return newContent;
    }
}
MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
</script>

You can also instruct your users to use the FormatBlock tool which allows to apply paragraph tags to the selected content as well as paragraph tags with formatting.

Kind regards,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.