Rank 1
I am referring to skin coloring, font, font sizes, headers etc.
Any help would be greatly appreciated. This will help us determine if we want to purchase the production version of the web part.
Thanks,
Jill
24 Answers, 1 is accepted
Hi Jillian,
r.a.d.editor is highly customizable in terms of visual appearance. You can build your custom skin, rearrange the toolset, change the fonts, css classes and so on. Additional info can be found in our online docuemntation online (some resources are on www.telerik.com):
- r.a.d.editor online documentation
www.telerik.com/help/radeditor/5.5/ - r.a.d.editor online examples
www.telerik.com/r.a.d.editor/ - Changing the default skin of r.a.d.editor: http://www.sharepointcontrols.com/help/radeditor/5.0/toolbarScheme.html
- Creating custom skin:
http://www.sharepointcontrols.com/help/radeditor/5.0/creatingcustomschemes.html - Fonts:
http://www.sharepointcontrols.com/help/radeditor/5.0/fonts.html - Colors:
http://www.sharepointcontrols.com/help/radeditor/5.0/colors.html - Customizing toolset:
http://www.sharepointcontrols.com/help/radeditor/5.0/toolbarOverview.html
Albert
the telerik team
Rank 1
As far as changing the scheme to monochrome or custom, where do I add the scheme attribute? Not in the content editor itself right?? Is it on the aspx page where the content editor has been added? If so, is there a generic place to do this. We don't want to have to update the aspx files unless absolutely necessary.
Thanks,
Jill
Rank 1
Hi,
One more thing. I've been able to change the colors available as font and cell colors, but when trying to update the font faces available, I'm having no luck. I followed the instructions provided in your posting, but the update is not taking affect.
Any suggestions??
Thanks,
Jill
Up to your questions:
- To customize the fonts you should follow these steps:
- Open the tools file. Its location depends on your deployment scenario: if you deployed in bin folder ToolsFile.xml should be in C:\Inetpub\wwwroot\wpresources\RadWebParts\RadControls\Editor\. If you deployed in GAC ToolsFile.xml should be in C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadWebParts\1.2.0.0__1f131a624888eeed\RadControls\Editor
- Locate the <fontNames> tag and add some fonts:
<fontNames>
<font name="Arial" />
<font name="Arial Narrow"/>
<font name="Arial Black" />
</fontNames> - Save the file and reload r.a.d.editor. You may clean your browser temporary files to avoid caching problems
- In the current official version of r.a.d.editor SharePoint edition the only way to set the scheme is by modifying the aspx file. However in the upcoming version we introduced a new web part property for the skin which allows easier customization.
Albert
the telerik team
Rank 1
Thank you for your help. I've checked in all noted places and my changes are in each toolsFile.xml. But my changes still do not appear.
I've done just what you have suggested, placed the three Arial types in as font names, but the new list is not generated.
I've also dumped my temp internet cache.
Thanks,
Jill
This approach is supposed to work and we have no clue why it hasn't on your side. We are sending you a ToolsFile.xml which we used to test. We have also attached a screenshot to show you how the font dropdown looked like.
You mentioned you have successfully customized the colors dropdown - the logic should be the same as with fonts. Could you send us your ToolsFile.xml so we can inspect it for any problems? Do you use a config file for r.a.d.editor? It may override your customizations.
Waiting for your reply,
Albert
the telerik team
Rank 1
Hi Albert.
Here is my toolsFile.xml that is currently installed.
I can't attach it, so I'm copying directly into this message:
<root>
<modules>
<module name="RadEditorStatistics" dockingZone="Bottom" enabled="false">
<argument name="ShowTableCount" value="true" />
<argument name="ShowImgCount" value="true" />
<argument name="Arg3" value="Value3" />
</module>
<module name="RadEditorDomInspector" dockingZone="Module" enabled="false" visible="false" />
<module name="RadEditorNodeInspector" dockingZone="Module" enabled="false" visible="false" dockable="false" />
<module name="RadEditorHtmlInspector" dockingZone="Module" enabled="false" visible="false" />
</modules>
<tools name="DialogToolbar" dockable="false">
<tool name="RADCOMMAND_SHOW_OPEN_DIALOG" enabled="false" />
<tool name="RADCOMMAND_SHOW_SAVEAS_DIALOG" enabled="false" />
<tool name="LinkManager" />
<tool name="FindAndReplace" />
<tool name="AboutDialog" />
<tool name="Help" />
<tool name="SpellCheck" />
<tool name="Print" />
</tools>
<tools name="MainToolbar" dockable="false">
<tool name = "SharePoint/ImageManager" />
<tool name = "SharePoint/FlashManager" />
<tool name = "SharePoint/DocumentManager" />
<tool name = "SharePoint/MediaManager" />
<tool name = "SharePoint/TemplateManager" />
<tool separator="true"/>
<tool name="Cut" />
<tool name="Copy" />
<tool name="Paste" />
<tool name="PasteFromWord" />
<tool name="PastePlainText" />
<tool name="PasteAsHtml" />
<tool separator="true"/>
<tool name="Undo" />
<tool name="Redo" />
</tools>
<tools name="InsertToolbar">
<tool name="InsertSymbol"></tool>
<tool name="InsertTable" />
<tool name="InsertFormElement" />
<tool name="InsertSnippet">
</tool>
<tool name="InsertParagraph" />
<tool name="InsertHorizontalRule" />
<tool name="InsertDate" />
<tool name="InsertTime" />
</tools>
<tools>
<tool name="Bold" />
<tool name="Italic" />
<tool name="Underline" />
<tool separator="true"/>
<tool name="JustifyLeft" />
<tool name="JustifyCenter" />
<tool name="JustifyRight" />
<tool name="JustifyFull" />
<tool separator="true"/>
<tool name="Indent" />
<tool name="Outdent" />
<tool name="InsertOrderedList" />
<tool name="InsertUnorderedList" />
<tool separator="true"/>
<tool name="Superscript" />
<tool name="Subscript" />
<tool name="StrikeThrough" />
<tool name="AbsolutePosition" />
<tool name="Unlink" />
</tools>
<tools name="EnhancedEditToolbar" dockingZone="Top" dockable="true">
<tool name="ToggleTableBorder" />
<tool name="Zoom" />
<tool name="ModuleManager" />
<tool name="ToggleDocking" />
<tool name="RepeatLastCommand" />
</tools>
<tools name="DropdownToolbar">
<tool name="ForeColor" />
<tool name="BackColor"></tool>
<tool name="FontName"></tool>
<tool name="FontSize"></tool>
<tool name="ApplyClass"></tool>
<tool name="InsertCustomLink"></tool>
<tool name="FormatBlock"></tool>
<tool name="FormatStripper" />
</tools>
<links>
<link name="telerik" href="http://www.telerik.com">
<link name="Products" href="http://www.telerik.com/products">
<link name="r.a.d.controls suite" href="http://www.telerik.com/radcontrols" />
<link name="r.a.d.navigation suite" href="http://www.telerik.com/radnavigation" />
<link name="r.a.d.editor" href="http://www.telerik.com/radeditor" />
<link name="r.a.d.designer" href="http://www.telerik.com/raddesigner" />
<link name="r.a.d.spell" href="http://www.telerik.com/radspell" />
<link name="r.a.d.chart" href="http://www.telerik.com/radchart" />
<link name="r.a.d.menu" href="http://www.telerik.com/radmenu" />
<link name="r.a.d.treeview" href="http://www.telerik.com/radtreeview" />
<link name="r.a.d.panelbar" href="http://www.telerik.com/radpanelbar" />
<link name="r.a.d.rotator" href="http://www.telerik.com/radrotator" />
<link name="r.a.d.tabstrip" href="http://www.telerik.com/radtabstrip" tooltip="Tooltip" />
</link>
<link name="Purchase" href="http://www.telerik.com/purchase" />
<link name="Support" href="http://www.telerik.com/support" />
<link name="Client.Net" href="http://www.telerik.com/clientnet" />
</link>
<link name="Microsoft">
<link name="Main Site" href="http://www.microsoft.com" />
<link name="MSDN Online" href="http://msdn.microsoft.com" />
<link name="Windows Update" href="http://windowsupdate.microsoft.com" />
</link>
<link name="Search Engines">
<link name="Google" href="http://www.google.com" />
<link name="Yahoo" href="http://www.yahoo.com" />
<link name="AltaVista" href="http://www.altavista.com" />
</link>
</links>
<snippets>
<snippet name="Order Confirmation">
<![CDATA[
<div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;">
Dear ____________________,<br>
Thank you for inquiring about ____________. Your request will be processed in 48 hours and shipped at the address you have provided.
<p>
<b>Please, contact us if you have any problems.</b>
</div>
]]>
</snippet>
<snippet name="Email Signature">
<![CDATA[
<div style="margin-top:30px;width:80%;border-top:1px dotted gray;padding-top:4px;font-family:Arial, Verdana; font-size:11px;">
<b>John Wigham</b><br>
Senior Web Developer<br>
<a href="#">john@mysite.com</a>
<br>
<br>
<i>Disclaimer: The contents of this e-mail are privileged and confidential and intended for the addressees at the specified e-mail addresses only.</i>
</div>
]]>
</snippet>
<snippet name="ASCII Art">
<![CDATA[
<pre>
<div style="border:2px outset #D8D2BD;font-size:12px;height:60px;width:450px;font-family:Courier;background-color:#F1EFE6;color:black;">
-------- __@ __@ __@ __@ __~@<br />
----- _`\<,_ _`\<,_ _`\<,_ _`\<,_ _`\<,_<br />
---- (*)/ (*) (*)/ (*) (*)/ (*) (*)/ (*) (*)/ (*)<br />
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</div>
</pre>
]]>
</snippet>
</snippets>
<symbols></symbols>
<fontnames>
<font name="Arial" />
<font name="Arial Narrow"/>
<font name="Arial Black" />
</fontnames>
<fontSizes></fontSizes>
<colors>
<color value="#CC0000" />
<color value="#AA0000" />
<color value="#780000" />
<color value="#5A0000" />
<color value="#FF7800" />
<color value="#FF5A00" />
<color value="#DC5000" />
<color value="#FFB400" />
<color value="#FF9707" />
<color value="#E08300" />
<color value="#76B900" />
<color value="#008ECD" />
<color value="#C90D8D" />
<color value="#000000" />
<color value="#FFFFFF" />
</colors>
<paragraphs></paragraphs>
<classes></classes>
</root>
<!-- ==============================================================================================
Tools File valid structure:
<root>
<tools>
<tool />
<tool />
...
</tools>
<tools>
<tool />
...
</tools>
...
</root>
"tool" element valid attributes:
name (required):
Bold, Italic, Underline, StrikeThrough, Superscript, Subscript,
JustifyLeft, JustifyCenter, JustifyRight, JustifyFull, InsertOrderedList,
InsertUnorderedList, Outdent, Indent, Cut, Copy, Paste, PasteFromWord, PastePlainText, Print,
Undo, Redo, InsertImage, AbsolutePosition, CreateLink, Unlink,
InsertHorizontalRule, InsertTable, ToggleBorders, Paragraph, Class, Font, FontSize,
Links, Custom, Symbols, BackColor, ForeColor, InsertFlash,
InsertMedia, SpellCheck, Sweeper, InsertParagraph, InsertSnippet,
Help, FindAndReplace, MultiLanguageSpellChecker
title (required):
Some hint string
enabled (required):
true/false (Indicates whether the tool should appear in the toolbar or not)
separator (not required):
true/false (Indicates whether a separator should appear after the tool)
"link" element valid attributes:
(link elements should appear as child elements of a tool element with "name" attribute set to "Links")
name (required):
Link/Category Name/Alias
href (not required):
URL of the link/category
target (not required):
target window of the link
tooltip (not required):
the tooltip for the link
"symbol" element valid attributes:
(symbol elements should appear as child elements of a tool element with "name" attribute set to "Symbols")
value (required)
the symbol to be displayed
"font" element valid attributes:
(font elements should appear as child elements of a tool element with "name" attribute set to "Font")
name (required):
Font Name
"class" element valid attributes:
(class elements should appear as child elements of a tool element with "name" attribute set to "Class")
name (required):
Class Alias
value (required):
Class Name
"paragraph" element valid attributes:
(paragraph elements should appear as child elements of a tool element with "name" attribute set to "Paragraph")
name (required):
Paragraph Alias
value (required):
Paragraph Name
"color" element valid attributes:
(color elements should appear as child elements of a tool element with "name" attribute set to "ForeColor" or "BackColor")
value (required):
Hex value of the color
"snippet" element valid attributes:
(snippet elements should appear as child elements of a tool element with "name" attribute set to "InsertSnippet")
name (required):
Snippet Alias
"language" element valid attributes:
(language elements should appear as child elements of a tool element with "name" attribute set to "MultiLanguageSpellChecker")
code (required):
Language Code
title (required):
Language title
=============================================================================================== -->
Thank you for your cooperation. Sending us your tools file really helped us to locate where the problem is.
The fonts were not applied because the <fontNames> tag should be spelled exactly that way - in your toolsfile it is <fontnames>. So your tools file should look like this:
<fontNames>
<font name="Arial" />
<font name="Arial Narrow"/>
<font name="Arial Black" />
</fontNames>
Could you please tell us where did you get the original tools file from? We would like to fix it to avoid any additional problems. Is it from some distribution, or somewhere in the documentation?
All the best,
Albert
the telerik team
Rank 1
I copied the code from the following URL. http://www.sharepointcontrols.com/help/radeditor/5.0/fonts.html
It is all in lowercase on this page.
Thanks for your help. I'm in a training class and won't get to repackage the cab file until Thursday (12/8). Once I've done so I will let you know the results.
Thanks for your help thus far :)
Jill
Thank you for bringing this issue to our attention - your points were updated. We will fix the documentation asap.
Let us know how this goes.
All the best,
Albert
the telerik team
Rank 1
your resolution worked perfectly.
One question though... if you click and begin adding text in the text area before selecting one of the fonts I added, it defaults to TimesNewRoman. Is there a way to fix this?? My list does not have TimesNewRoman in it...
Also, how do i tell the webpart to use specific style sheet attributes?
Thanks,
Jill
You have to modify EditorContentArea.css (found in RadControls/Editor/Schemes/Default/ by default). There is a css rule .RadEContent, .RadEContentBordered which is by default applied to r.a.d.editor. You can set the desired font family in that rule and it will override the default font Times New Roman.
You can set a custom set of css files that r.a.d.editor will use. You can either set the CssFiles property of the RadEditor tag or use a ConfigFile. Both ways are described in details here and here.
Sincerely yours,
Albert
the telerik team
Rank 1
I applied the changes to the style sheet for the font, but it doesn't seem to be taking hold.
I delete the web part from the page, remove it from the system by performing a deletewppack, redeploy the updated cab and nothing changes...
this is what I add to the style sheet:
font-family: "HelveticaNeueLT Std Cn";
Let me know if I am missing the entire point or if it should work. I do a few IISResets in there as well.
Now I'm going to move to the style type changes...
Thanks,
Jill
Could you tell us what the version of RadWebParts.dll (that you are using) is? We have modified that behavior in our latest release (v2.0.0.0).
The class applied in r.a.d.editor content area has changed to ms-WPBody which is css class defined globally in SharePoint. We made that modification to provide true WYSIWYG experience - every webpart is rendered inside a <div> with its class set to ms-WPBody.
If you have upgraded to v2.0 you need to modify the ms-WPBody css rule and set font-family there. That rule is defined here: C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES\ows.css
If you are using RadWebParts.dll 1.x then you should modify the .RadEContent class.
In both cases, we think the very font will cause problems because it is not standard system font.
Could you try setting different font-family e.g. "Arial" and see if it works?
You could also try setting font-family: "HelveticaNeueLT Std Cn"; in a simpler scenario such as:
<span style="font-family: "HelveticaNeueLT Std Cn";">Test</span>.
On our side that didn't work because of the font.
Let us know how it goes,
Albert
the telerik team
Rank 1
to answer your question, I am not running 2.0. I am running the 1.0.0.0 version. So, I tried just to add Arial as the font family and this did not work either.
I am also having trouble adding the css file I would like to reference. I've added the property to the Config.xml file as instructed and added the css file to the Editor folder as well. I've also updated the manifest.xml to include the css file just to make sure that it takes... and nothing. I really don't understand what is going on here.
Thanks,
jill
We tested with v1.0.0.0 and verified that modifying the font-family attribute of the .RadEContent css class changed the font in r.a.d.editor.
You can find the modified version of EditorContentArea.css attached to this support thread.
Is it possible that it is a caching problem? You could try deleting the temporary files of your browser.
As for the other problem with the css files, you can check the following things:
- In order to use config file, you have to properly set the ConfigFile property of the RadEditor tag in ContentEditor.aspx (more instructions can be found here)
- Css files should be properly referred in ConfigFile.xml. For example if your css file is located in the RadControls folder it should be referred as:
<property name="CssFiles">
<item>~/RadWebParts/1.0.0.0__1f131a624888eeed/RadControls/test.css</item>
</property>
or if you deployed in the bin folder:
<property name="CssFiles">
<item>~/wpresources/RadWebParts/RadControls/test.css</item>
</property>
All the best,
Albert
the telerik team
Rank 1
Font now shows up correctly after clearing temp internet cache.
Trying your <property name="CssFiles">
<item>~/RadWebParts/1.0.0.0__1f131a624888eeed/RadControls/test.css</item>
</property>
for the cssFile reference.
I'll keep you posted of the progress.
Thank you so very much for all your help thus far!!!
Jill
We can verify the css file registration is correct. As for the caching - it is a common solution to css or javascript problems - Internet Explorer keeps referring to the old files. You can turn caching off when using IE for development purposes: Tools->Options->General->Settings->Every visit to the page.
Don't hesitate to contact us if you have other questions,
Albert
the telerik team
Rank 1
How do we verify that the css file is registered properly?? It isn't coming up in the dropdown yet.
Thanks,
jill
This is the right way to refer to your css file if it is located in C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadWebParts\1.0.0.0__1f131a624888eeed\RadControls.
Have you correctly set the ConfigFile property of the RadEditor tag in ContentEditor.aspx? That file is located in C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadWebParts\1.0.0.0__1f131a624888eeed\RadControls\EditorWebPart\Dialogs.
By default config file is not used unless you specify one via the ConfigFile property. In your contenteditor.aspx you RadEditor tag should look like this in order to use the config file:
<radE:RadEditor id="contentEditor"
Runat="server"
OnClientSubmit="OnSubmit"
OnClientLoad="OnLoad"
OnClientCancel="OnCancel"
CacheLocalization="True"
DocumentsFilters="*.*"
AllowThumbGeneration = "True"
ConfigFile = "~/RadWebParts/1.0.0.0__1f131a624888eeed/RadControls/Editor/ConfigFile.xml">
</radE:RadEditor>
Is that the case on your side?
Expecting your reply,
Albert
the telerik team
Rank 1
I have made the changes to the ContentEditor.aspx page as noted in your last post... It did not work.
Just as a side note, there was no instruction on this in any of the documentation links you have sent me thus far, maybe it should be added to one of the sections??
Performed iisreset and cleared all cache after making changes.
Thanks,
Jill
Indeed that is not mentioned in the documentation and we will add it for sure.
We decided to prepare step-by-step instructions how to use custom css file. Here they are:
- Set the ConfigFile property of the RadEditor control (as described in our previous reply).
- Copy your css file in C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadWebParts\1.0.0.0__1f131a624888eeed\RadControls\. We used a file named "test.css"
- Edit ConfigFile.xml to register the css file:
<property name="CssFiles">
<item>~/RadWebParts/1.0.0.0__1f131a624888eeed/RadControls/test.css</item>
</property>
Those steps work as expected on our side (see attached screenshot).
We are also sending you our configfile.xml, test.css and ContentEditor.aspx to use them as a reference.
We hope that helped,
Rank 1
It worked. I needed to change the manifest.xml file... needed to have it place the new css file in the right place.
Question for you, all changes I have made can be made to the production version as well right?? Just wanted to make sure.
Thank you so much for all your help. My manager is working with our purchasing people to get the production version of the editor for our sharepoint portal.
Jill
All the changes you have made so far should work. However if you obtain the latest version you should edit the ms-WPBody css class to modify the font used by default in r.a.d.editor (we have described it earlier in this thread). You should also backup your ConfigFile.xml and ToolsFile.xml before upgrading to production version and replace them afterwards. Also keep in mind the ConfigFile property - you should set it again after the upgrade.
Don't hesitate to contact us if you have other questions, we will gladly respond.
Happy holidays,
Albert
the telerik team