Is it possible to set RadEditor button defaults such as 'Font Name' to Arial

[John]

Greetings,

As the question states, I'm trying to set the default for the 'Font Name' drop down on the RadEditor.  I'd like to set the font style and size to Arial, 12pt.

Is this possible?  I have custom buttons on the editor and I know it's possible to set indexes on dropdowns but I don't know if Telerik will allow me to set such indexes for these predefined buttons.  It doesn't look like the Tools File provides any access to this area.

Thanks!
John

[Shinu]

Hi John,

Try the following client side code for setting the default font style and size.

ASPX:

<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
</telerik:RadEditor>

JavaScript:

<script type='text/javascript'>
function OnClientLoad(editor, args)
{
  var style = editor.get_contentArea().style;
  style.fontFamily= 'Arial';
  style.fontSize= 12 + 'px';
}
</script>

-Shinu.

[John]

Shinu,

Appreciate this code.  This does solve the problem in a round-about way.  I was hoping also to reflect this setting in the button itself.

Is there a way to change the font type and font size buttons so they reflect what the content area is set to?

Thanks!

[Rumen]

Hello John,

Please, try the following code to set the FontName and RealFontSize header values:

<script type='text/javascript'>
function OnClientLoad(editor, args)
{
    var style = editor.get_contentArea().style;
    style.fontFamily= 'Arial';
    style.fontSize= 12 + 'px';

    var tool = editor.getToolByName("FontName");

    if (tool)
    {
            tool.set_value("Arial");
    }

    var tool2 = editor.getToolByName("RealFontSize");

    if (tool2)
    {
            tool2.set_value("12px");
    }
}
</script>
 <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
</telerik:RadEditor>

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

[John]

Thanks very much !

[Gaurav]

Hi,

I am using the same code to set the default font. this is working fine in IE but not working in mozilla.

<script type='text/javascript'>

function OnClientLoad(editor, args)

{

var style = editor.get_contentArea().style;

style.fontFamily= 'Arial';

style.fontSize= 12 + 'px';

var tool = editor.getToolByName("FontName");

if (tool)

{

tool.set_value("Arial");

}

var tool2 = editor.getToolByName("RealFontSize");

if (tool2)

{

tool2.set_value("12px");

}

}

</script>

<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">

</telerik:RadEditor>

Thanks
Gaurav

[Rumen]

Hi Gaurav,

The only difference in Firefox that I can see is that the FontName dropdown does not show 12px. You can fix this by setting a small timeout

 if (tool) { setTimeout(function () { tool.set_value("Arial"); }, 100); }

<script type='text/javascript'>
    function OnClientLoad(editor, args) {
        var style = editor.get_contentArea().style;
        style.fontFamily = 'Arial';
        style.fontSize = 12 + 'px';

        var tool = editor.getToolByName("FontName");

        if (tool) {
            setTimeout(function () {
                tool.set_value("Arial");
            }, 100);
        }

        var tool2 = editor.getToolByName("RealFontSize");

        if (tool2) {
            tool2.set_value("12px");
        }
    }
</script>
 <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
</telerik:RadEditor>

Kind regards,
Rumen
the Telerik team

[Gaurav]

Hi Telerik,

Everything is fine. on page load font has been set. But ASA I click on editable area, default font ('Arial') changed with 'Font Name'.
I want ASA User click on editable area, default font must be show which is working fine in IE but not in mozilla. I am using 3.6.14 version of mozilla.

Pls see attachment.


One thing more I would like to clear when I am saving font in database at that time in code behind I get like this

string text=radTopTextbox.Content.Trim();//radTopTextbox is the id of telerik:RadEditor

text=<span style="font-family: arial;">Top text 1<br /> qweqwe</span>

Now font is saving like 'arial'. while it must be save like 'Arial'
that why at the time to display default font it is displaying like 'arial'.

[Rumen]

Hi Gaurav,

1) See and try the solution provided in the following forum: RadEditor : Font Name : Initial value never gets set in Firefox.

2) It is the ConvertToXhtml filter of RadEditor that converts all attributes and theirs values to lowercase. If you want you can convert the font names on the server using the String.Replace method, e.g.

string text=radTopTextbox.Content.Replace("font-family: arial;", "font-family: Arial;");

Kind regards,
Rumen
the Telerik team

[Shekhar]

Can u provide me the url of same link that are mention above.
i am facing the same problem

[Shinu]

Hello Shekhar,

Check the following forum thread.
http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-font-name-initial-value-never-gets-set-in-firefox-2-0.aspx

-Shinu.

[Shekhar]

Hi Shinu,

Thanx a lot its working f9.

[Sanjay]

Thanks Team,

Its really help full. It has resolved my Problem.

[Abdallah]

I need to set  the fontFamily to Lato , I know that Lato is not figuring the font family list 
how can I set the font family to Lato  ?

is the below  implementation works ?


ASPX:
<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server"> 
</telerik:RadEditor> 



JavaScript:
<script type='text/javascript'>
function OnClientLoad(editor, args) 
{ 
  var style = editor.get_contentArea().style; 
  style.fontFamily= 'Lato';
} 


</script>