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

14 posts, 0 answers
  1. John
    John avatar
    25 posts
    Member since:
    Jun 2009

    Posted 31 Aug 2009 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Sep 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    25 posts
    Member since:
    Jun 2009

    Posted 01 Sep 2009 Link to this post

    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!
  5. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 03 Sep 2009 Link to this post

    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.
  6. John
    John avatar
    25 posts
    Member since:
    Jun 2009

    Posted 03 Sep 2009 Link to this post

    Thanks very much !
  7. Gaurav
    Gaurav avatar
    9 posts
    Member since:
    Feb 2011

    Posted 02 Mar 2011 Link to this post

    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
  8. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 02 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  9. Gaurav
    Gaurav avatar
    9 posts
    Member since:
    Feb 2011

    Posted 02 Mar 2011 Link to this post

    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'.
  10. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 08 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  11. Shekhar
    Shekhar avatar
    2 posts
    Member since:
    Sep 2012

    Posted 15 Nov 2011 Link to this post

    Can u provide me the url of same link that are mention above.
    i am facing the same problem
  12. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007
  13. Shekhar
    Shekhar avatar
    2 posts
    Member since:
    Sep 2012

    Posted 15 Nov 2011 Link to this post

    Hi Shinu,

    Thanx a lot its working f9.
  14. Sanjay
    Sanjay avatar
    1 posts
    Member since:
    Feb 2012

    Posted 01 Nov 2014 Link to this post

    Thanks Team,

    Its really help full. It has resolved my Problem.
  15. Abdallah
    Abdallah avatar
    1 posts
    Member since:
    Nov 2014

    Posted 13 Nov 2014 in reply to Sanjay Link to this post

    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> 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017