Setting the default Font (and restricting fonts)

[Christopher]

Hi All,

Is there a way to make the editor start with a default font rather than Times New Roman ?

I've managed to restrict the fonts that appear in the Fonts drop-down by adding the following to my ToolsFile.xml file:

<fontNames>
   <item name="Arial" />
   <item name="Arial Narrow" />
   <item name="Arial Black" />
</fontNames>

However the default font when the editor opens is still Times New Roman.

Cheers,
Chris

[Rumen]

Hi Chris,

I believe the following documentation article will be of help: Default Font for Editable Content. The approach for RadEditor for MOSS is the same, the only difference is the location of the EditorContentArea.css file. In MOSS environment you can find it in (default location) Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.4.1.0__xxxxxxxxxxx\RadControls\Editor\Skins\<your skin>

When you set the font in the .RadEContent, .RadEContentBorrdered classes, save the file and restart your browser. This is needed because the content area is an IFRAME element and the browser caches its styles.

Kind regards,
Rumen
the Telerik team

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

[Christopher]

Hi Rumen,

Thanks for the quick response !!

The link you gave appears to be broken - can you please re-post it ?

many thanks,

Chris

[Christopher]

Hi Rumen,

I found the article you were referring to, but am still having a little trouble !!

I go to my directory: C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.4.1.0__1f131a624888eeed\RadControls\Editor\Skins\

and there are two sub-folders named "Default" and "Default2006" - I've edited the ".RadEContent, .RadEContentBordered" style in the "EditorContentArea.css" file in both of these folders so that is looks like below:

.RadEContent, .RadEContentBordered
{
 font-family: Arial, Verdana, Tahoma;
    font-size: 10pt;
 padding:3px;
 background-image: none;
 margin: 0px; 
 text-align: left; 
 scrollbar-face-color: #E9E9E9;
 scrollbar-highlight-color: #FFFFFF;
 scrollbar-shadow-color: #E9E9E9;
 scrollbar-3dlight-color: #DBDBDB;
 scrollbar-arrow-color: #787878;
 scrollbar-track-color: #F5F5F5;
 scrollbar-darkshadow-color: #AEAEAE;
 word-wrap: break-word;
}

i.e. I've added font-family and font-size to the style.

I've reset IIS and closed my browser, but when I open the editor in a WCM page it still defaults to times new roman as the font (and displays Times New Roman in the font drop-down even though my toolsfile.xml only states to display Arial !).

Any help appreciated.

Kind Regards,

Chris

[Rumen]

Hi Christopher,

If you use the default skin then you should modify the C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.4.1.0__1f131a624888eeed\
RadControls\Editor\Skins\Default\EditorContentArea.css file only.

It seems that you have done everything properly, but for some reason the browser is caching the old content area appearance. My suggestion is to delete your browser cache and then restart your browser to see the change.

For your convenience I have attached a video demonstrating how to set the desired default font appearance and background color.


Sincerely yours,
Rumen
the Telerik team

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

[Christopher]

Hi Rumen,

Thanks for the suggestion - a simple "Delete temporary internet files" appears to have solved the problem.

One more thing - is it possible to restrict the font sizes listed in the font size drop-down menu so that some of the larger ones are removed ? Also is it possible to make these more user-friendly e.g. 10pt, 12pt etc ?

Many thanks again for all your help.

Chris.

[Rumen]

Hello Christopher,

Please, review the following two articles which will help you to achieve your scenario:
Restricting Custom Font Colors and Sizes within the Dropdowns
and
Real Font Sizes

Kind regards,
Rumen
the Telerik team

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

[Christopher]

Many thanks Rumen - you're a star - I've got it working exactly as I wanted.

Many thanks again.

Chris

[Ciaran Colgan]

Hi to all, following on from Christopher's post where he managed to restrict the font options in RadEditor for MOSS - I am using RadEditor for SharePoint 2007 version 5.4

 

I have tried everything outlined in both this post and the official article:

http://www.telerik.com/help/aspnet/editor/restrictingcustomfontcolorsandsizeswithinthedropdowns.html

 

But to no avail – I still can’t restrict the font and font size options.

  

My Tools.xml file looks like this:

 

<root>
  <modules>
    <module name="RadEditorDomInspector" />
  </modules>
  <tools name="MossTools1">
    <tool name="AjaxSpellCheck" />
    <tool name="FindAndReplace" />
    <tool separator="true" />
    <tool name="Cut" shortcut="CTRL+X" />
    <tool name="Copy" shortcut="CTRL+C" />
    <tool name="Paste" shortcut="CTRL+V" />
    <tool separator="true" />
    <tool name="Undo" shortcut="CTRL+Z" />
    <tool name="Redo" shortcut="CTRL+Y" />
    <tool separator="true" />
    <tool name="MOSSLinkManager" shortcut="CTRL+K" />
    <tool name="Unlink" shortcut="CTRL+SHIFT+K" />
    <tool name="ImageManager" shortcut="CTRL+G" />
    <tool name="MOSSTemplateManager" />
    <tool separator="true" />
    <tool name="MOSSInsertTable" />
    <tool name="SetTableProperties" />
    <tool name="ToggleTableBorder" />
    <tool separator="true" />
    <tool name="MOSSInsertTableElement">
      <tool name="InsertRowAbove" />
      <tool name="InsertRowBelow" />
      <tool name="InsertColumnLeft" />
      <tool name="InsertColumnRight" />
      <tool name="DeleteRow" />
      <tool name="DeleteColumn" />
      <tool name="SplitCell" />
    </tool>
    <tool name="MergeColumns" />
    <tool separator="true" />
    <tool name="ToggleSource" />
    <tool name="FormatStripper" />
    <tool separator="true" />
    <tool name="MOSSRightToLeft" />
    <tool name="MOSSLeftToRight" />
    <tool separator="true" />
    <tool name="ForeColor" />
    <tool name="BackColor" />
  </tools>
  <tools name="MossTools2">
    <tool name="ApplyClass" />
    <tool name="FormatBlock" />
    <tool separator="true" />
    <tool name="FontName" />
    <tool name="FontSize" />
    <tool separator="true" />
    <tool name="Bold" shortcut="CTRL+B" />
    <tool name="Italic" shortcut="CTRL+I" />
    <tool name="Underline" shortcut="CTRL+U" />
    <tool separator="true" />
    <tool name="JustifyLeft" />
    <tool name="JustifyCenter" />
    <tool name="JustifyRight" />
    <tool separator="true" />
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList" />
    <tool separator="true" />
    <tool name="Indent" />
    <tool name="Outdent" />
  </tools>
     <fontSizes>
     <size value="1" />
     <size value="5" />
     <size value="7" />
    </fontSizes>
    <fontNames>
      <item name="Arial" />
      <item name="Arial Narrow" />
      <item name="Arial Black" />
    </fontNames>
  <contextMenus>
    <contextMenu forElement="*">
      <tool name="Cut"/>
      <tool name="Copy"/>
      <tool name="Paste"/>
    </contextMenu>
  </contextMenus>
</root>

But it refuses to work! Help!!

Thanks

Ciaran

[Stanimir]

Hi Ciaran,
I appologise for the inconvenience, but there is mistake in our help articles. Here is how your ToolsFile.xml should look.

<root>
    <modules>
        <module name="RadEditorDomInspector" />
    </modules>
    <tools name="MossTools1">
        <tool name="AjaxSpellCheck" />
        <tool name="FindAndReplace" />
        <tool separator="true" />
        <tool name="Cut" shortcut="CTRL+X" />
        <tool name="Copy" shortcut="CTRL+C" />
        <tool name="Paste" shortcut="CTRL+V" />
        <tool separator="true" />
        <tool name="Undo" shortcut="CTRL+Z" />
        <tool name="Redo" shortcut="CTRL+Y" />
        <tool separator="true" />
        <tool name="MOSSLinkManager" shortcut="CTRL+K" />
        <tool name="Unlink" shortcut="CTRL+SHIFT+K" />
        <tool name="ImageManager" shortcut="CTRL+G" />
        <tool name="MOSSTemplateManager" />
        <tool separator="true" />
        <tool name="MOSSInsertTable" />
        <tool name="SetTableProperties" />
        <tool name="ToggleTableBorder" />
        <tool separator="true" />
        <tool name="MOSSInsertTableElement">
            <tool name="InsertRowAbove" />
            <tool name="InsertRowBelow" />
            <tool name="InsertColumnLeft" />
            <tool name="InsertColumnRight" />
            <tool name="DeleteRow" />
            <tool name="DeleteColumn" />
            <tool name="SplitCell" />
        </tool>
        <tool name="MergeColumns" />
        <tool separator="true" />
        <tool name="ToggleSource" />
        <tool name="FormatStripper" />
        <tool separator="true" />
        <tool name="MOSSRightToLeft" />
        <tool name="MOSSLeftToRight" />
        <tool separator="true" />
        <tool name="ForeColor" />
        <tool name="BackColor" />
    </tools>
    <tools name="MossTools2">
        <tool name="ApplyClass" />
        <tool name="FormatBlock" />
        <tool separator="true" />
        <tool name="FontName" />
        <tool name="FontSize" />
        <tool separator="true" />
        <tool name="Bold" shortcut="CTRL+B" />
        <tool name="Italic" shortcut="CTRL+I" />
        <tool name="Underline" shortcut="CTRL+U" />
        <tool separator="true" />
        <tool name="JustifyLeft" />
        <tool name="JustifyCenter" />
        <tool name="JustifyRight" />
        <tool separator="true" />
        <tool name="InsertOrderedList" />
        <tool name="InsertUnorderedList" />
        <tool separator="true" />
        <tool name="Indent" />
        <tool name="Outdent" />
    </tools>
    <fontSizes>
        <item>1</item>
        <item>5</item>
        <item>7</item>
    </fontSizes>
    <fontNames>
        <item name="Arial" />
        <item name="Arial Narrow" />
        <item name="Arial Black" />
    </fontNames>
    <contextMenus>
        <contextMenu forElement="*">
            <tool name="Cut"/>
            <tool name="Copy"/>
            <tool name="Paste"/>
        </contextMenu>
    </contextMenus>
</root>

Regards,
Stanimir
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Abhishek]

Hi All,

I am using Telerik RadEditor version 5.7.2.0__1f131a624888eeed. In the folder structure, \RadControls\Editor\Skins\<your skin> is not present. I want to change the Default font to Verdana. I have also add the below code in Tools.xml:

<fontNames>
   <item name="Verdana" />
   <item name="Verdana Narrow" />
   <item name="Verdana Black" />
</fontNames>

This is coming in under font but the default font is still Times new Roman. I have also searched for EditorContentArea.css file. But it is not present. Can you please help me out where can I get the file? Please suggest.

Waiting for your reply.

Thanks,
Abhishek

[Stanimir]

Hello Abhishek,

What you need to do is load the following style in the content area of RadEditor:

body
{
    font-family: Verdana;
}

You can find information how to do this in the following online help article: Defining custom CSS styles


Kind regards,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Abhishek]

Hi Stanimir,

Thanks for your reply. It's working.

I have another query. In the Radeditor, Bullet and Italics is not working in publishing mode. But when I am in edit mode, both are working.
Please let me know, if there is any workaround. Waiting for your reply.

Thanks,
Abhishek

[Stanimir]

Hi Abhishek,

Could you provide me with more information on the problem. I will need a step by step scenario of how to reproduce it. A couple of screen shots will be helpful as well.


Best wishes,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Abhishek]

Hi Stanimir,

PFA. The screnshots are both in edit mode and publishing mode for bullet and italic. In italic, I have seen that it showing like <em></em> in edit mode which should be <i></i>.

Please suggest. Waiting for your reply.

Thanks,
Abhishek

[Stanimir]

Hi Abhishek,

Regarding the EM problem I suggest you to create a custom content filter, which converts all <em> elements to <i>. Here is how to do this.

1. Add the following element to the respective ConfigFile.xml or ListConfigFile.xml, which are located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder:

<property name="OnClientLoad">OnClientLoad</property>

2. Add the following javascript code to the MOSSEditorTools.js file, which is located in the mentioned above folder:

function OnClientLoad(editor, args)
{
    editor.get_filtersManager().add(new MyFilter());
}
MyFilter = function ()
{
    MyFilter.initializeBase(this);
    this.set_isDom(false);
    this.set_enabled(true);
    this.set_name("RadEditor filter");
    this.set_description("RadEditor filter description");
}
MyFilter.prototype =
{
    getHtmlContent: function (content)
    {
        var newContent = content;
        //Make changes to the content and return it
        newContent = newContent.replace(/<EM>/gi, "<i>");
        newContent = newContent.replace(/<\/EM>/gi, "<\/i>");
        return newContent;
    }
}
MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);

More information on content filters you can find in the following online help article: http://www.telerik.com/help/aspnet-ajax/contentfilters.html.

Regarding the bullets problem. Could you provide me with the HTML code, which is producing the editor and a sample of code, which you expect to be produced. Also check if there are any global css styles applied over the list elements. You can do this by using a tool such as IE developers toolbar for Internet explorer or Filrebug for Filrefox. For your convenience I attached a couple of screen shots where you can see the usage of the mentioned tools.


Greetings,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Abhishek]

Hi Stanimir,

Thanks for your reply. Exactly I did it already for Italic. It's working.
 
But for Bullet, it is still not working. Earlier I have attached the screen shot in publish mode and edit mode.
I have searched in my style sheet but could not find anything regarding Ul. Please find the attached screen shot.

Waiting for your reply.


Thanks,
Abhishek

[Stanimir]

Hello Abhishek,

From your screen shot I can see that the list-style-type css property of the selected LI element is set to none. This means that there is a style rule, which is causing your problem. Unfortunately from your screen shot I can not tell, which style sheet is the origin of the decoration.

I simulated the LI elements styling on my test server by adding the following css style in the CORE.CSS file, which is located in the Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES folder.

li
{
    list-style-type: none;
}

I attached a screen shot where I am using Firebug and you can actually see that the decoration comes form core.css.

Greetings,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.