RadEditor : Font Name : Initial value never gets set in Firefox 2.0

[carlpro]

I have a ContentAreaCssFile that contains the following CSS:

body
{
    font-family:Verdana;
    font-size:10px;
}

And on the Page Load event, I have the following code:

    var contentArea  =  editor.get_ContentArea();
    if (contentArea != null)
    {
        contentArea.style.fontFamily = "Verdana";
        contentArea.style.fontSize = "10px";
    }

In IE 7, when the user clicks in the body of the Editor, the Font Name and Font Size get correctly set to "Verdana" and "10px".

However, in Firefox 2.0, then FontName never gets set. After clicking in the editor, it still says "FontName".  Is this a Bug?   Is there a work-around?

[Rumen]

Hi Carl,

The observed behavior is browser related and depends on the used browser.
The editor dropdowns headers display the information supplied by the browser and Firefox does not provide information about the font name when the default font name is used. You can see that the FontName header displays the default font name information in Internet Explorer.

If you select the content and apply font name Verdana you will see that Firefox will provide the needed font name information and the FontName dropdown header will be updated.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tervel]

Hi carlpro,

Some additional information on this:

For the built-in commands into the browser's rich edit engine (e.g. commands such as Bold, Italic, FontName, FontSize), the editor relies on using the built-in document.queryCommandValue function to obtain the current state - as it "expects" that this built-in function would return the most accurate information even in more complex scenarios.

While in IE the queryCommandValue returns "Verdana" correctly, in FF the browser returns an empty string.

Of course, when the user has actually applied explicitly some font styling using the tool, then the information returned is correct.


Best regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[carlpro]

Is there a 'work-around'?  - So when the user clicks in the editor body for the first time using FireFox, the Verdana font will show up as selected in the dropdown.

[Tervel]

Hi carlpro,

For your convenience we developed a workaround, however to run it you will need to use the latest Q3 SP2 Prometheus build release from Feb. 25 2008.
You need to attach to the editor's OnClientSelectionChange event

<telerik:radeditor runat="server" OnClientSelectionChange="OnClientSelectionChange" .../>

Here is the code:

function OnClientSelectionChange(editor, args)
{
    var fontValue = editor.get_document().queryCommandValue("FontName");
    if (!fontValue)
    {
        var curValue = $telerik.getCurrentStyle(editor.getSelectedElement(), "fontFamily");
        if (curValue)
        {
            var fontName = editor.getToolByName("FontName");
            if (fontName)
            {
                window.setTimeout(function()
                {
                    fontName.updateValue(curValue);
                }, 0);
            }
        }
    }
}

We will do our best to integrate this code in the editor at a later stage.
Let us know if you have additional questions.

Best regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Paul Haines]

I've hit this issue and, whilst we've sorted the problem with Firefox, (which was a lot harder than first thought because I needed to display the values in points, not pixels), but I was wondering what the equivalent of the above javascript code is for Safari? If it helps it only needs to be compatible with version 3.x or later, rather than any earlier ones.

(We need to support IE, Firefox and Safari).

Thanks,
Paul

[Rumen]

Hi Paul,

I tested the provided code in Safari and verified that it works as expected. You can see my test in the attached video. Am I missing something?

Best regards,
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.

[Albert Shenker]

I believe there is a typo in the code provided here. The second line should be if (!fontValue), should it not?

[Rumen]

Hello Albert,

Yes, it should be if (!fontValue) and I updated the code snippet.


All the best,
Rumen
the Telerik team