This is a migrated thread and some comments may be shown as answers.

Setting the default Font (and restricting fonts)

17 Answers 908 Views

WebParts for SharePoint

This is a migrated thread and some comments may be shown as answers.

17 Answers, 1 is accepted

answered on 14 Dec 2007, 02:04 PM

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

answered on 14 Dec 2007, 02:19 PM

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

answered on 14 Dec 2007, 02:48 PM

SettingTheDefaultContentAreaAppearanceInRadEditorMOSS.zip

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

answered on 05 Feb 2010, 03:54 PM

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

answered on 08 Feb 2010, 12:50 PM

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.

answered on 28 Sep 2010, 12:40 PM

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

answered on 30 Sep 2010, 08:04 AM

italic-edit-mode.JPG

bullet-edit-mode.JPG

publishmode-bullet-italic.JPG

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 in edit mode which should be .

Please suggest. Waiting for your reply.

Thanks,
Abhishek

answered on 04 Oct 2010, 08:29 AM

firebugtest.png

iedevtoolbar.png

Hi Abhishek,

Regarding the EM problem I suggest you to create a custom content filter, which converts all elements to . 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(//gi, "");

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.

answered on 04 Oct 2010, 08:42 AM

bullet.JPG

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

answered on 04 Oct 2010, 09:04 AM

firebugtest.png

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.