[Solved] FireFox and Font selector.

[Dmytro]

I've got a few problems with font/ default font.
in FireFox for the empty editor window, select any font and font size, click back on the editor and selection is GONE, there is a WorkAround to do select-all first and then change a font, but it's not an option.
Second. Default font in IE don't applied, let's say you have Times New Roman 12 as a default in editor, so you put some text, in generated text Default Font is not present. so if this HTML will be saved into db and then shown on another page, it won't respect default font....

[Rumen]

Hi Dmytro,

This problem appears when RadEditor is set to use the same default font and size, as the font and size that are set in the content editor's browser (usually Arial 10pt). Then the browser doesn't use a font name / size tag to display nor save the correct font as it recognizes it be default. This problem is explained in details in this KB article: No FONT tags are applied when I type text in the editor.

You can also try the following workaround that should set the Default font-size for the editor's content area:

<script type="text/javascript">
function OnClientLoad(editor)
{
  setTimeout(function()
  {
   editor.fire("SelectAll");
   var args = new Telerik.Web.UI.EditorCommandEventArgs("RealFontSize", null, "32px");
   editor.fire("RealFontSize", args);
  }, 10);
}
</script>
<telerik:RadEditor runat="server"
   OnClientLoad="OnClientLoad"
   ID="RadEditor1">
</telerik:RadEditor>

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

[Robert]

I tried this workaround that was suggested by using the javascript .fire method of the editor to set a default font name and size.  In Firefox 3.5, I can see that the font name and size are changed, but as soon as I start typing in the editor window, it reverts right back to what it was before...the defaults from the browser.

It does not do this in IE8.

[Rumen]

Hi Robert,

Indeed, the RealFontSize tool is not suitable to set the default font size in Firefox.
Please, use the FotnSize tool instead of the RealFontSize tool, e.g.

<script type="text/javascript">
function OnClientLoad(editor)
{
    setTimeout(function()
    {
        editor.fire("FontSize", {value:4});
    }, 100);
}
</script>
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>

This code works in IE and Firefox as well.

Please, note that the FontSize tool can works only with the supported by the browser values from 1 to 7.

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

[Robert]

Unfortunately, for us, we need to use the realfontsize.

Our users store their default font name, size and color in a database and we need to retrieve that information from the database and default the editor to use those values.  The font size stored is in pixels.

That is why I can't use the externalcssfile property of the editor to do this as well.

Is there any other means of setting the default font, font size and forecolor of the editor?  code behind would be great.

[Rumen]

Hi Robert,

You should not hide the RealFontSize tool from the toolbar, but just set the default font using the FontSize command and the editor.fire() method. Once it is fired the editor will insert a span tag with font-size style in pixels (<span style="font-size: 18px;"></span>) that will wrap the content entered in the editor.

The font size information is a client side setting that could be controlled on the client with css or javascript. Of course, you can import the javascript code from the server using the ClientScript.RegisterClientScriptBlock method, e.g.

    protected void Page_Load(object sender, EventArgs e)
    {
        string myscript = @"
            <script type='text/javascript'>
            function OnClientLoad(editor)
            {
                setTimeout(function()
                {
                    editor.fire('FontSize', {value:4});
                }, 100);
            }
            </script> ";
        ClientScript.RegisterClientScriptBlock(this.GetType(), "myscriptkey", myscript);
    }

Another way is to wrap the obtained content on the server in a span tag having the desired font-size style in pixels, e.g.

RadEditor1.Content = "<span style='font-size: 18px;'>" + RadEditor1.Content  +  "</span>";

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.