Telerik Rad Editor Customization

This is a series of customizations you can make to the Telerik Rad Editor to make it more useful, behave better and create cleaner code.

Table Of Contents [Hide]     Creating Custom Settings     Adding Custom CSS Classes     Editor Configuration     Toolbar Configuration     Emoticons     Other Settings    Related references

Creating Custom Settings »

For the customizations below to continue working after a Dot Net Nuke upgrade, it is recommended a custom copy is made of the configurations files. Then reference these new files in the dotnetnuke -> htmledit -> TelerikEditorProvider section of the web.config file.

For example, if you create ConfigCustom.xml and ToolsCustom.xml, the web.config setting should be changed to:

<add name="TelerikEditorProvider"
type="DotNetNuke.HtmlEditor.TelerikEditorProvider.EditorProvider, DotNetNuke.HtmlEditor.TelerikEditorProvider" 
providerPath="~/Providers/HtmlEditorProviders/Telerik/" 
toolsFile="~/Providers/HtmlEditorProviders/Telerik/Config/ToolsCustom.xml" 
configFile="~/Providers/HtmlEditorProviders/Telerik/Config/ConfigCustom.xml" 
FilterHostExtensions="True" />

Refer to Web.config and Upgrading DotNetNuke for more information on this process.

Adding Custom CSS Classes »

The following controls the content in the Style drop down menu:

1. Create a file called RadEditor.css in your portal root.
2. Copy all the content-specific styles from your skin into this file leaving out layout or module specific styles.  The editor will copy most of these already so only focus on ones needed in the styles drop down and overides for layout.
3. Be sure to add body,html{background-color:#fff;text-align:left;} to keep the editor area clean and usable.
4. Narrow the focus of the classes and IDs (For example, a ul specific style would be ul.MyStyle{...} not .MyStyle{...} ). This will allow the editor to put icons beside the style as visual cues for where and when to use the class.
5. The classes should be "declared" in a clean manner. The style ul.MyStyle li won’t make the parent ul style available. A rule like ul.MyStyle rule must exist first.
6. To apply the settings, Open:/Providers/HtmlEditorProviders/Telerik/Config/ConfigDefault.xml and add

      <property name="CssFiles">[PortalRoot]RadEditor.css</property>  

   .
   

Editor Configuration »

These are a few settings to make the editor behave better and produce more standards compliant html.

Open the file /Providers/HtmlEditorProviders/Telerik/Config/ConfigDefault.xml and make the follow changes:

1. Change NewLineBr to false to create paragraphs instead of line breaks.
2. Review the StripFormattingOnPaste and ContentFilters settings for your own taste. ConfigDocumented.xml has explanations of the settings.
3. Add

    <property name="UseSharedToolbar">true </property> 

   to help when two or more editors are on the same page.
4. Add

    <property name="ImageManager.ViewPaths">[PortalRoot]images</property> 

   so the images folder can be seen in the image manager.
   

Toolbar Configuration »

Open the file /Providers/HtmlEditorProviders/Telerik/Config/ToolsDefault.xml (and min for simular changes)

1. Add lines to the section to reflect the styles you want in the drop down. (for example, )
   Very important to set the values to exactly what is in the RadEditor.css style sheet or they won’t display.
   

Remove the following lines to remove tools that create inline CSS.

1.  <tool shortcut="CTRL+SHIFT+F" name="FontName"> 

2.  <tool shortcut="CTRL+SHIFT+P" name="RealFontSize"> 

3.  <tool name="ForeColor"> 

4.  <tool name="BackColor"> 

   
   

Emoticons »

By default, the Rad Editor doesn't support emoticons but this hack will repurpose the snipets menu to enable them again.

1. open /Providers/HtmlEditorProviders/Telerik/Config/ToolsDefault.xml
2. locate the and paste this code the before it:
   

  <snippets>
    <snippet name="&lt;img src='/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/regular_smile.gif' /&gt; Smile">
      <![CDATA[
	  <img src="/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/regular_smile.gif" width="19" height="19" alt="Smile" />
	  ]]>
    </snippet>
    <snippet name="&lt;img src='/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/teeth_smile.gif' /&gt; Big Smile">
      <![CDATA[
	  <img src="/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/teeth_smile.gif" width="19" height="19" alt="Big Smile" />
	  ]]>
    </snippet>
    <snippet name="&lt;img src='/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/sad_smile.gif' /&gt; Sad">
      <![CDATA[
	  <img src="/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/sad_smile.gif" width="19" height="19" alt="Sad" />
	  ]]>
    </snippet>
    <snippet name="&lt;img src='/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/confused_smile.gif' /&gt; Confused">
      <![CDATA[
	  <img src="/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/confused_smile.gif" width="19" height="19" alt="Confused" />
	  ]]>
    </snippet>
    <snippet name="&lt;img src='/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/cry_smile.gif' /&gt; Cry">
      <![CDATA[
	  <img src="/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/cry_smile.gif" width="19" height="19" alt="Cry" />
	  ]]>
    </snippet>
    <snippet name="&lt;img src='/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/embaressed_smile.gif' /&gt; Embaressed">
      <![CDATA[
	  <img src="/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/embaressed_smile.gif" width="19" height="19" alt="Embaressed" />
	  ]]>
    </snippet>
    <snippet name="&lt;img src='/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/tounge_smile.gif' /&gt; Tounge">
      <![CDATA[
	  <img src="/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/tounge_smile.gif" width="19" height="19" alt="Tounge" />
	  ]]>
    </snippet>
    <snippet name="&lt;img src='/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/omg_smile.gif' /&gt; OMG!">
      <![CDATA[
	  <img src="/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/images/smiley/msn/omg_smile.gif" width="19" height="19" alt="OMG" />
	  ]]>
    </snippet>

  </snippets>

Repeat the pattern for any additional emoticons you want available

Other Settings »

Check that htmtemplate is in the host settings for allowed file types. This is required to enable the templates feature.

Related references»

• Radeditor config file options
• Radeditor toolbar options
• demo page for Radeditor toolbar options