setting font name drop down default selected

[ian]

i am using version 7.1.2.0 of the editor

i am trying to set the default font dropdown, right now it always shows new times roman even when i don't have that selection in the dropdown.

I've tried the code i foudn in other threads:

var tool = editor.GetToolByName("FontName");
if (tool)
{
    tool.set_value("Arial");
}

but i get a "Object does not support this proeprty or method" error.

I've tried Set_value(), setValue(), SetValue(), even UpdateValue() and its variation i saw somewhere. Some doesn't throw an error, but does not set the default value.

[Rumen]

Hi Ian,

You can apply the default header value of the FontName dropdown of RadEditor Classic using the code below:

<script type="text/javascript">
function OnClientLoad(editor)
{
    var fontFamily = editor.GetToolByName("FontName");
    setTimeout(function()
    {
        fontFamily.Element.getElementsByTagName("DIV")[0].innerHTML = "Arial";
    }, 100);
}
</script>
<rade:radeditor id="RadEditor1" OnClientLoad="OnClientLoad" EnableDocking="false" runat="server"></rade:radeditor>

You can see how to change the default font of the content area in this article: Default Font for Editable Content.

Best regards,
Rumen
the Telerik team

[ian]

The code did not work.

When i try alert(fontFamily.Element.getElemenetsByTagName("DIV")[0].innerHTML);
It gives me "Font Name", and not "times new roman".

[ian]

I am using IE 7 by the way.
In firefox, the drop down says "Font Name", then changes to "Arial" and then back to "Font Name" when the page finishes loading.

[Rumen]

Hi Ian,

You have a typo in the getElemenetsByTagName method name. It should be getElementsByTagName.

The code works in IE on my end, but not in Firefox. I rewrote it by increased the timeout and this fixed the problem in Firefox:

<script type="text/javascript">
function OnClientLoad(editor)
{
    var fontFamily = editor.GetToolByName("FontName");
    var timeout = (document.all) ? timeout = 0 : timeout = 1000;
    setTimeout(function()
    {
        fontFamily.Element.getElementsByTagName("DIV")[0].innerHTML = "Arial";
    }, timeout);
}
</script>
<rade:radeditor id="RadEditor1" OnClientLoad="OnClientLoad" EnableDocking="false" runat="server"></rade:radeditor>

For your convenience I have attached my test project and a video of how the solution works: http://screencast.com/t/So46o188.

Kind regards,
Rumen
the Telerik team

[ian]

The typo was only on here.
The code does work, it was the timeout issue, i had to set it longer, or else the control defaults it to "new times roman" after the code sets it to Arial.
Thank you for your help

[Jon Shipman]

In case anyone's interested.  I'm using v2010.3.1109.35 of the RadControls Suite.  Here's the code that works with that version:

function OnClientLoad(editor, args)
{
    // This sets the default style for the content when the
    // editor is in edit mode. Any further adjustments to the
    // fonts by the users will override this.
    var style = editor.get_contentArea().style;
    style.fontFamily = 'Trebuchet MS';
    style.fontSize = '11pt';

    // This sets the text of the "FontName" and "RealFontSize"
    // to match the style you just set in the above step.
    var fontFamily = editor.getToolByName("FontName");
    var fontSize = editor.getToolByName("RealFontSize");
    var timeout = (document.all) ? timeout = 0 : timeout = 1000;
    setTimeout(function()
    {
        fontFamily._element.getElementsByTagName("span")[0].innerHTML = "Trebuchet MS";
        fontSize._element.getElementsByTagName("span")[0].innerHTML = "11pt";
    }, timeout);
}