How do I set the default font on Telerik's RadEditor?

Question

There must be an easy way to set the default selected font of the Font Name dropdown list. I've been looking around on the Telerik site and forums but I can't find a simple way. Maybe there is no simple way, but maybe I just can't find it.

Here is my RadEditor:

      <telerik:RadEditor ID="RadEditor1" runat="server" ContentFilters="MakeUrlsAbsolute,ConvertToXhtml,RemoveScripts"
                    EditModes="All" EnableResize="false" Font-Bold="false" Font-Names="Arial" Font-Size="8pt"
                    Height="230px" MaxHtmlLength="3000" MaxTextLength="3000" NewLineMode="Br" Skin="Web20">
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorTool Name="ImageManager" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Enabled="true" Name="FontName" />
                            <telerik:EditorTool Enabled="true" Name="FontSize" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Enabled="true" Name="BackColor" />
                            <telerik:EditorTool Enabled="true" Name="ForeColor" />
                            <telerik:EditorTool Enabled="true" Name="Bold" />
                            <telerik:EditorTool Enabled="true" Name="Italic" />
                            <telerik:EditorTool Enabled="true" Name="Underline" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Enabled="true" Name="Copy" />
                            <telerik:EditorTool Enabled="true" Name="Cut" />
                            <telerik:EditorTool Enabled="true" Name="Paste" />
                            <telerik:EditorTool Enabled="true" Name="AjaxSpellCheck" Text="Spell Check" />
                        </telerik:EditorToolGroup>
                    </Tools>
                    <ImageManager MaxUploadFileSize="1048576" SearchPatterns="*.jpg,*.jpeg,*.png,*.gif,*.bmp, *.ico"
                        UploadPaths="~/images/" ViewPaths="~/images/" />
                </telerik:RadEditor>

I hope one of you out there can tell me! Thanks!

score 5 · Answer 1 · edited Mar 09 '15 at 22:04

5

This article might be helpful http://www.telerik.com/help/aspnet-ajax/editor-default-font-for-editable-content.html

You can also set the default FontName header dropdown value in the OnClientLoad event using this code:

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

edited Mar 09 '15 at 22:04

crthompson

15,653
6
58
80

answered Sep 14 '12 at 13:43

Rumen Jekov

1,665
2
17
19

The OnClientLoad way works! Thank you!!! I used this for the OnLoad: function RadEditorLoad(sender, eventArgs) { var tool = sender.getToolByName("FontName"); tool.set_value("Arial"); } – unnknown Sep 14 '12 at 15:10
1

Well it does change the selection to Arial, but then when I click inside the text area, it changes it to "Times New Roman", maybe there is a Js event for when I click inside there area that I need to handle – unnknown Sep 14 '12 at 15:16

score 5 · Accepted Answer · answered Sep 18 '12 at 21:25

This worked:

The editor:

 <telerik:RadEditor ID="myEditor" OnClientLoad="RadEditorLoad" runat="server" ... >

Handler:

        function RadEditorLoad(editor, eventArgs) {

            // Set the Editor Default Font to Arial

             editor.get_contentArea().style.fontFamily = 'Arial'
        }

Found this at: http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-setting-font.aspx

score 0 · Answer 3 · answered Nov 10 '15 at 12:40

Create a css file 'RadEditorContentArea.css' with the following content:

body 
{  
   font-family: Arial!important;
}

Add this css file as the editor css file as follows

<telerik:RadEditor runat="server" ID="RadEditor1">
    <CssFiles>
        <telerik:EditorCssFile Value="~/RadEditorContentArea.css" />
    </CssFiles>
</telerik:RadEditor>

Check out this link for more: http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/content-area-appearance/default-font-for-editable-content

How do I set the default font on Telerik's RadEditor?

3 Answers3